react redux how to change object value in reducer

React Redux: How to Change Object Value in Reducer

As a web developer, I have worked on several projects that used React and Redux together. One common task that I have come across is changing the value of an object in the reducer. In this blog post, I will explain how to do that in detail.

Understanding Reducers

Reducers are pure functions that take the current state and an action as arguments and return a new state. They are responsible for updating the state of the application. In Redux, the state is usually an object or an array.

Changing Object Value in Reducer

Let's say we have an object in our state called 'user' which looks like this:

const initialState = {
    user: {
        name: 'John',
        age: 25,
        email: '[email protected]'
    }
}

Now, let's say we want to change the age of the user to 30. We can achieve this by creating a new object with the updated value and return it from the reducer. Here's how we can do that:

const reducer = (state = initialState, action) => {
    switch (action.type) {
        case 'CHANGE_AGE':
            return {
                ...state,
                user: {
                    ...state.user,
                    age: 30
                }
            }
        default:
            return state
    }
}

In the above code, we have created a new object using the spread operator (...) and updated the age property in it. We then return this new object from the reducer.

We also need to dispatch an action to trigger this change in the reducer. Here's an example:

const changeAge = () => {
    return {
        type: 'CHANGE_AGE'
    }
}

dispatch(changeAge())

In the above code, we have created a function called 'changeAge' which returns an object with the type 'CHANGE_AGE'. We then dispatch this action using the 'dispatch' function.

Other Ways to Change Object Value in Reducer

There are several other ways to change the value of an object in the reducer. One way is to use the 'Object.assign' method. Here's how we can do that:

const reducer = (state = initialState, action) => {
    switch (action.type) {
        case 'CHANGE_AGE':
            return Object.assign({}, state, {
                user: Object.assign({}, state.user, {
                    age: 30
                })
            })
        default:
            return state
    }
}

In the above code, we have used the 'Object.assign' method to create a new object with the updated value of age. We then return this new object from the reducer.

Another way is to use a library like Immer which provides a simple and efficient way to update immutable objects. Here's an example:

import produce from 'immer'

const reducer = (state = initialState, action) => {
    switch (action.type) {
        case 'CHANGE_AGE':
            return produce(state, draftState => {
                draftState.user.age = 30
            })
        default:
            return state
    }
}

In the above code, we have used the 'produce' function from Immer to update the age property of the user object. We then return the updated state from the reducer.

Conclusion

Changing the value of an object in the reducer is a common task in Redux. We can achieve this by creating a new object with the updated value and returning it from the reducer. There are several other ways to do this, such as using the 'Object.assign' method or a library like Immer.