Some ways to update the state in Redux!

Tram Ho

In the last post, I introduced Immutability in React and Redux ! Today I would like to introduce the ways to update state that is very popular in Redux! As you know in redux state will be updated in the reducer, the functions in the reducer must be pure functions, that is, not directly modified on the state, but must create a new state based on the old state, this part. I also mentioned in the previous lesson. Writing code updates state immutability can be a little tricky for newcomers. In this article I will guide some sample state updates that are commonly used in most cases. Another small note is that these ways you can also use with regular state updates such as setState, not necessarily need to use redux to use it!

Math history spreed

Spreed is a three-dot operator … it is also quite easy to use and is frequently used with objects or arrays. So I will also see how it works. Spreed … is placed before an object or an array, it will spread out the internal components and also create a new Array or object. The example below will make it clearer about this:

The spreed operator will help me create an object or a new Array with the same value and structure as the old array or object. This will be very useful so that I can copy an array / object and then override the internal child attributes I want to change.

State update is an object

As I mentioned above, if I want to update a state as an object, the easiest way is to use the spreed operator to spread the attributes inside the state like this … state. Then override the properties that you need to change the value. For example, I have a simple reducer that updates a state when I press the button to increase or decrease the number of clicks on a certain button

Update an object in an object

When you want to update an object with multiple levels, that is, an object has properties of an object, then in this case I will do the same but must copy all levels of that object.

Of course here I do so is to create a new object and update attribute points, but merely if you just need to create a new object without updating any attribute, you just need to make it short as The top is okay. Another example that explains how to update an object with 2 levels, I will do the same

In case the object has many levels as above, it seems a bit difficult to read and understand, but if you are familiar, you will see it is a short and commonly used way of writing.

Inserts an element at the beginning of the array

When I want to insert an element at the beginning of the array, I immediately think of using unshift function in javascript, but this way will update on that array itself. This is something I do not want and not true to the principle of immutability. So if I applied the spreed operator above to match redux, what would I do?

So what if I did not insert at the beginning of the array but at the end of the array? Just a small change

In this case, there is a simpler way if you do not want to use the spreed operator:

I will make a copy with the slice, then add the element at the end of the array with the familiar push function.

Update an object in an Array

Finally, I will come up with a more difficult situation that assumes I have array, there are many objects in array, and now I want to update one or more objects in that array, how to do? The way to do it will be the same as above, the difference here is how I create a new array to return copies of objects that have been changed. I also use a familiar function that is map function. The map function will return a new array based on the array you have provided, it will browse through each element in the array and copy those elements into a new array via the return statement. In a nutshell, if my array has N elements and I want to return N elements, I will use map. So I can easily update an object associated with the condition. See the example below:

In the above example I have a list object in an array, and I want to update one or more emails on each object. So to distinguish between objects, I will rely on the ID field, The information that the object to update is in the action. So when browsing through the items I will combine with the condition item.id === action.payload.userId to know which object I need to update! Easy ? Above I have introduced some ways to update the state in redux in particular and in react js in general. If the article has any missing points, please comment!

References

https://daveceddia.com/react-redux-immutability-guide/

Share the news now

Source : Viblo