Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to update a value of a nested object in a reducer?

I have built my state like so

const list = {   categories: {    Professional: {     active: false,     names: [       {         id: 1,         name: "Golf",         active: false       },       {         id: 2,         name: "Ultimate Frisbee",         active: false       }   ]  }} 

In my action I have added an ID option so I would like to change the active status when the user clicks the option to do so

I am using Immutable JS though not married to it. I am wondering how I could target the id of the object and update its active status in a reducer? I am also open to feedback on how to better improve my state

like image 280
albert Avatar asked Oct 17 '16 21:10

albert


People also ask

How do you update an object in react redux?

Redux: Update an Object When you want to update the top-level properties in the Redux state object, copy the existing state with ... state and then list out the properties you want to change, with their new values.

What is immutable update?

Immutable environment updates are an alternative to rolling updates. Immutable environment updates ensure that configuration changes that require replacing instances are applied efficiently and safely. If an immutable environment update fails, the rollback process requires only terminating an Auto Scaling group.


1 Answers

This is very common thing, and, actually, quite daunting. As far as I know, there is no really good and well-adopted solution in plain JS. Initially, Object.assign approach was used:

return Object.assign({}, state, {   categories: Object.assign({}, state.categories, {     Professional: Object.assign({}, state.Professional, {       active: true     })   }) }); 

This is too straightforward and cumbersome, I admit it, but I have to say that we've built few big applications with this approaches, and except for number of characters it is not bad. Nowadays, the most popular approach is using Object spread:

return {   ...state,   categories: {     ...state.categories,     Professional: {       ...state.categories.Professional,       active: true     }   } } 

The second approach is much more cleaner, so if you use plain JS, then it seems as a good choice. In Immutable.js I have to admit it is easier, you just do the next

return state.updateIn(['categories', 'Professional'], x => x.set('active', true)); 

But it has it's own drawbacks and caveats, so it is better to think about it seriously before committing to it.

And your last question regarding improving the state – usually it is better not to have such deep nesting (separate your concerns, very often fields don't depend on each other – like active status can be separated to another object), but it is hard to say because of no knowledge of your domain. Also, it is considered as normal thing to normalize your data.

like image 94
Bloomca Avatar answered Sep 28 '22 02:09

Bloomca