Tuesday 17 November 2020

Pass redux store to react-dom/server's renderToString() method

I have a regular React app (CRA). In one part of the app I use Mapbox to display a map, and to render a popup I need to pass inn a string of the html content to render. Instead of passing in the raw html, I still wan't to use React to render the popup, so I do this:

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

Get the html string from rendering the popup component. This is still client side, the docs says it's fine to use renderToString() for these use cases on client side as well.


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

Create a popup with the html string.


This works as expected. Now my problem: I wan't to use redux from within my Popup component. Both dispatch an event, and read the global state. How can I do this? Can I actually do this?


What I've tried

If I try to just use redux within the Popup component, I get the following error message:

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



from Pass redux store to react-dom/server's renderToString() method

No comments:

Post a Comment