Integrating React and OpenLayers within a Redux Architecture

Question

We're currently working on a new web mapping solution at our company. So far we decided to build the app using React and OpenLayers 4. Since we want to use the Redux pattern for our architecture there will be one redux store holding the application state.

The problem we face with this stack is as follows:
The map is the central element in our application and its instance needs to be passed to a number of different components. As an example, a tool for drawing features on the map needs a reference to the map instance so that it can add itself to it as an interaction tool.
We discussed how to structure our app to integrate OpenLayers with React in the most reliable way and ended up with two different approaches:

The first approach we discussed is holding a reference to the map object in the application-wide redux store so that it simply can get passed down to any component via the @connect annotation function of react-redux. While this solution provides an easy access to map we were wondering whether this would be a tractable approach since the store should be kept minimal and the map object never changes throughout the lifecycle of the application.
The second approach considers rendering components like the draw interaction mentioned above as child components of the react map component. The map instance could then be passed down to the children of the map component either directly as a prop or by leveraging reacts context object using the Provider pattern.
However, the react documentation explicitly advises against using context, though we found a number of solutions using this pattern (react-geo, react-leaflet) and also popular libraries like react-redux make use of it.
We therefore thought about using React.Children.map() to clone the child components and then adding map to them as a prop.

I hope the problem we are facing got clear enough. We do not know what would be the better way in terms of react best practices.

What architecture would fit better to the "react way" of designing/managing and application and why?

It would be nice if you could share what did you, in the end, decided to do. — sarunast, Jun 06 '18 at 10:03
We finally decided to go for a complete different approach that encapsulates the required logic using sagas. — TobsenB, Jun 25 '18 at 06:35

score 1 · Answer 1 · answered Aug 15 '18 at 08:32

1

I'm late to the party here, but six months ago I would have recommended using Context API as Redux was using it. As an alternate solution, I would have simply maintained a global object reference on window.app.cache.

Now, the React Context API is the way to go for this. Hope Saga didn't complicate the project!

answered Aug 15 '18 at 08:32

Nick

4,002
4
30
41

Hey, we started out using sagas but then quickly realized that this approach contradicts the approach of the store being the single truth (changes to the store were not applied to the map in some cases). So we finally tried to depict map objects as react component to fully leverage the react lifecycle (and the redux provider pattern). – TobsenB Sep 19 '18 at 07:03

Integrating React and OpenLayers within a Redux Architecture

1 Answers1