Simple Redux with nested state?

I’m working on a React-Redux conversion of a part of an app with a deeply nested state. It seems the common approach is to use normalizr for this, but I’m trying to keep things as simple as possible and the maintain the original format of the state since the devs that will be working on this have little to no knowledge of react or redux so the simpler the better.

Any thoughts on another KISS approach for something like this?

My original plan, which is what I’m going with for now, was to use lodash’s functional set (see lodash/fp). This can set values in a nested object given a path, returning a new object with only changes made within that path - exactly what is needed for redux.

newState = _.set('my.value.path', newValue, origState);

The trick is making sure each component dispatching changes within the state has access to the appropriate path (which isn’t tricky so much as just being extra boilerplate).

We’re already using lodash in other places, so that’s not unfamiliar, and this hides most of the intricacies of state immutability within a fairly comprehensible and possibly already familiar api - so long as people remember to use it.

1 Like