Thoughts about relationship deletion in Redux with Normalizr

When working with Redux, you have to consider keeping your entities normalized and in a single place. I chose to inspire myself from the real-world example written in the Redux repository. But when you consume your API, you want to be able to link or unlink entities just by adding or removing an element from an array. I had to struggle a bit for this part, and I’m still open to a better suggestion.

So, here’s the basic implementation given in the Redux’s real-world example :

This is the entities reducer. It takes all the actions and merge the normalizr’s results within the state, returning the new one.

Here comes the problem : let’s say we have two entities, tweet and user for example. A user can like/unlike (yes, goodbye favorite) a tweet. These actions, I omit the request/response/normalizing process, will then be dispatched like this :

Passing the reducer, it works, yay! You get your new state with each entity referencing the other one. Now I want to unlike it… And… BOOM, user is still liking it. So, what do we do now ? Here’s the first solution I came with :

When creating the new state, you obviously want to keep immutability in place. So you assign (or spread into a new object) the new entity with the filtered relationship array.

But I felt unsatisfied with this, we don’t need to know about the global state here. I came across this issue in the redux official repo, making me remember how the reducers can be useful to modify only part of the state. So here’s the second solution :

The defaultEntitiesReducer is acting when nothing is catched in the switch statement. Its behavior is the same as the entities reducer in the redux real-world example. There’s a lot of boilerplate code in here, but I’m sure we can come up with something removing all of this. I’ll update this post if I find a better way.

Update 12th november 2015 :

I came up with a better solution by using combineReducers inside the reducer itself.