4

I’m new to React/Redux tools and still figuring out some idiomatic design patterns.

Here's a scenario:

A user adding a place marker (that has some associated metadata) to an interactive map (Leaflet), which should be held in state.

I’ve just come from MeteorJS, in that situation it would go something like:

  1. User defines marker location on map
  2. Leaflet callback with marker position
  3. Add marker properties to state object in MiniMongo
  4. A state observer see’s the state change
  5. Calls custom module to add marker to map, init some event handlers etc.

However; the subscribe hook in Redux doesn’t really give much to work with (compared to meteor - so far I’ve avoided it completely, and have been using onComponentDidMount/Update for initialisation/responding to non-trivial state changes.

React's component lifecycle hooks work swimmingly when the ‘thing’ to be updated is a react component, but what about the above example - there is no React component to speak of?

So now I have:

  1. User defines marker location on map
  2. Leaflet callback with marker position
  3. Dispatch action
  4. Reducer updates state
  5. ?

Naive options

  • Wrap redux subscribe with some kind of diff logic so I know what exactly needs to be updated in leaflet when state changes? This would not handle restore state gracefully though (see note below).
  • Use renderless components, i.e. React components that don't render any UI (return null), but exist within the virtual DOM and are still plugged into the component life-cycle? Others seem to be using this pattern (eg1, eg2) - which would work nicely, but it smells.

Notes

  • I'd like the component structured in a way such that the state (and map marker) can be restored without any explicit intervention (which my meteor example doesn't really cover) - e.g. onComponentDidMount approach does this (if app is initialised with existing state the UI automatically reflects this).
  • The map marker is just an example to illustrate the problem, I typically work on SPA's with many 3rd party components that fit this pattern so a general solution would be great.

Happy to provide more detail if required - thanks!

danwild
  • 149
  • 3
  • Marker metadata in Redux state, component, and component which reads from Redux state, handles events, and renders itself and accordingly? – Jared Goguen Jan 25 '19 at 04:24
  • That's kind of what I'm trying to avoid @JaredGoguen - I don't want to re-write/add wrappers for every, single, leaflet component that I want to use ([react-leaflet](https://react-leaflet.js.org) does this). The point is - I'd prefer a general pattern that can be applied to a range of different 3rd party tools without writing too much glue code. Saying that; I *am* starting to lean towards the "renderless components" approach I mentioned above, which is basically what you're suggesting... – danwild Jan 25 '19 at 04:53
  • I fail to see the benefit of renderless components within the context of Redux, it seems like any data/functionality in one of these components could either be absorbed into the state or the reducer (the action flow and the render flow go hand-in-hand, re-renders are triggered by updates in state, which are triggered by actions). I could be missing something, but maybe you need to shift toward a more action-oriented mindset (as opposed to a listener-oriented mindset)? Once your state is correct, React/Redux should take care of everything else. Is there a reason you need `redux subscribe`? – Jared Goguen Jan 25 '19 at 13:59
  • The problem is that react is *not* doing the rendering - it is being handled by another tool (leaflet in this example) - so ‘triggering a re-render’ does not implicitly apply to a non-react component - unless it is explicitly instructed in another way, e.g. using renderless components to hook into the react component life-cycle. My understanding is that actions may contain some logic to produce a payload, and reducers apply the payload to the store. It feels wrong to do step 5 *before* the store is updated (i.e. pre-empt the state of the store)? – danwild Jan 28 '19 at 22:11
  • To clarify - I don't need `redux subscribe`, I'm not using it and am trying to avoid it in this situation as it seems a poor fit. – danwild Jan 28 '19 at 22:13

0 Answers0