2

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!

  • Marker metadata in Redux state, <MapMarker> component, and <Map> component which reads from Redux state, handles events, and renders itself and <MapMarkers> accordingly? – Jared Goguen Jan 25 at 4: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 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 at 4: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 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 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 at 22:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.