将 redux 存储传递给 react-dom/server 的 renderToString() 方法

Question

我有一个常规的React应用程序(CRA)。在应用程序的一部分中，我使用 Mapbox 来显示地图，并且要呈现弹出窗口，我需要传入要渲染的 html 内容的字符串。我仍然想使用 React 来渲染弹出窗口，而不是传入原始 html，所以我这样做：

const renderedContent = renderToString(
<Popup
port={port}
poiType={poiType}
activeView={activeView}
isPortsOnly={isPortsOnly}
locations={locations}
/>
)

从呈现弹出组件中获取 html 字符串。这仍然是客户端，文档说在客户端对这些用例使用renderToString()也可以。

<小时 />

new Popup()
.setLngLat(coordinates)
.setHTML(renderedContent)
.addTo(self.map)

使用 html 字符串创建弹出窗口。

---

这按预期工作。现在我的问题：我不想在我的 Popup 组件中使用 redux。两者都调度事件，并读取全局状态。我该怎么做？我真的可以这样做吗？

<小时 />

我试过什么

如果我尝试只在弹出窗口组件中使用redux，则会收到以下错误消息：

Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>

Answer 1

嗯，这很有趣！我使用以下代码制作了一个沙盒，滚动查看一些解释：

弹出窗口.js

import React, { useRef, useEffect } from "react";
import { connect } from "react-redux";
import { Popup } from "mapbox-gl";
import { zoomAction } from "./ActionCreators";
const CustomPopup = ({ zoomAction, lng, lat, zoom, map }) => {
const popUpRef = useRef(null);
useEffect(() => {
if (popUpRef.current && map) new Popup().setLngLat([lng, lat]).setDOMContent(popUpRef.current).addTo(map);
}, [popUpRef, map, lng, lat]);
const zoomIn = () => {
zoomAction();
map.zoomIn(zoom);
};
return (
<div ref={popUpRef}>
<h1>Hello World!</h1>
<button onClick={zoomIn}>zoom in (currently {zoom})</button>
</div>
);
};
const mapStateToProps = (state) => {
return { ...state };
};
const mapDispatchToProps = { zoomAction };
export default connect(mapStateToProps, mapDispatchToProps)(CustomPopup);

地图.js

import React, { useMemo, useState } from "react";
import MapboxGl from "mapbox-gl";
import { connect } from "react-redux";
import "mapbox-gl/dist/mapbox-gl.css";
import "./MapGl.css";
import Popup from "./Popup";
MapboxGl.accessToken = "pk.eyJ1IjoibmljZXk3MjMxMSIsImEiOiJja2hrdGE4MHkwMGxxMndteDRucGIyMDVqIn0.MKokCfCrE8VskLRUNGO0hw";
const MapGl = ({ zoom, lng, lat }) => {
const [isLoaded, setIsLoaded] = useState(false);
const map = useMemo(() => {
if (isLoaded)
return new MapboxGl.Map({
container: document.querySelector(".mapContainer"),
style: "mapbox://styles/mapbox/streets-v11",
center: [lng, lat],
zoom: zoom
});
}, [isLoaded]);
return (
<div>
<div ref={() => setIsLoaded(true)} className="mapContainer" />
{map && <Popup map={map} />}
</div>
);
};
const mapStateToProps = (state) => {
return { ...state };
};
export default connect(mapStateToProps)(MapGl);

地图.css

.mapContainer {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}

应用.js

import React from "react";
import "./App.css";
import MapGl from "./MapGl";
export default () => {
return <MapGl />;
};

索引.js

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import "./index.css";
import store from "./Store";
import App from "./App";
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root")
);

商店.js

import { createStore } from "redux";
const initialState = {
lng: -96,
lat: 37.8,
zoom: 3
};
function rootReducer(state = initialState, action) {
switch (action.type) {
case "zoom":
return { ...state, zoom: state.zoom + 1 };
default:
return state;
}
}
let store = createStore(rootReducer);
export default store;

动作创造者.js

export const zoomAction = () => ({
type: "zoom"
});

第一件事是将setHtml替换为setDOMContent，它采用现有的 DOM 节点而不是字符串。其次，renderToString的使用与服务器端渲染相关联，这是情境化的。在此示例中，我制作了一个带有按钮的弹出窗口，该按钮调度缩放操作以更新商店以及同步地图对象本身。您可以看到应用于地图的新缩放值，并在弹出窗口中更新了商店值。

Answer 2

尝试在Popup控制器所在的位置创建一个函数，该函数调度某些内容并将其传递给该组件。我的意思是这样的：

const doSomething = () => {
dispatch(do());
};
const renderedContent = renderToString(
<Popup
port={port}
poiType={poiType}
activeView={activeView}
isPortsOnly={isPortsOnly}
locations={locations}
onDoSomething={doSomething}
/>
)