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

Question

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

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在 Popup 组件中使用，则会收到以下错误消息：

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);

MapGl.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);

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;

ActionCreators.js

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

首先是用现有的 DOM 节点而不是字符串来setHtml替换。setDOMContent其次，它的使用renderToString与服务器端渲染相关，这是视情况而定的。在此示例中，我创建了一个带有按钮的弹出窗口，该按钮调度缩放操作以更新商店以及同步地图对象本身。您可以看到应用于地图的新缩放值以及在弹出窗口内更新的存储值。