Can't update a nested object's property using Redux

Question

In React we have a best practice not modify state directly i.e. mutation... It is also important in Redux...

/* initial state */
export const usersStartState = { users: { isLoggedIn: false } }

export default function users(state = usersStartState, action) {
    switch (action.type) {
        case actionTypes.users.IS_LOGGED_IN:
            return Object.assign({}, state,
                state.users.isLoggedIn = true)
        case actionTypes.users.IS_LOGGED_OUT:
            return Object.assign({}, state,
                state.users.isLoggedIn = false)
        default:
            return state
    }
};

The above doesn't work, but can anyone help me how to properly update that nested objects property?

Brian Thompson · Accepted Answer · 2019-12-19 18:01:08Z

1

Looks like you're both mutating state and returning a new state object. You're mutating state by saying state.users.isLoggedIn = .., but then returning a new state object by doing return Object.assign(...).

Instead maybe just do

case actionTypes.users.IS_LOGGED_OUT:
  return { ...state, users: { ...state.users, isLoggedIn: false }};

An alternative would be to create a copy of state and modify it instead

// Create new object so we don't mutate state
let newState = {...state, users: {...state.users}; 
// Remember to do this for each nested object or you 
// will still be referencing that piece of the original state
switch (action.type) {
  case actionTypes.users.IS_LOGGED_IN:
    newState.users.isLoggedIn = true; // Make your changes
    return newState; // Return new state
  case actionTypes.users.IS_LOGGED_OUT:
    newState.users.isLoggedIn = true;
    return newState;
  default:
    return state;
}

edited Dec 19, 2019 at 18:01

answered Dec 19, 2019 at 17:50

Brian Thompson

14.5k4 gold badges27 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

kooskoos Over a year ago

I forgot to spread state.users, saw your answer and remembered. Thanks

Antonio Pavicevac-Ortiz Over a year ago

Thanks Brian, but this case actionTypes.users.IS_LOGGED_IN: return {...state, users: {...state.users, isLoggedIn: true } }; yields {users: isLoggedIn: false users: {isLoggedIn: true}}

Brian Thompson Over a year ago

That return value doesn't look like a valid format? is that exactly what its returning? Or is it supposed to be {isLoggedIn: false}, ?

Antonio Pavicevac-Ortiz · Accepted Answer · 2019-12-19 18:33:18Z

1

You can do this

return {...state, users:{...state.users, isLoggedIn : true}}

edited Dec 19, 2019 at 18:33

Antonio Pavicevac-Ortiz

7,85720 gold badges76 silver badges160 bronze badges

answered Dec 19, 2019 at 17:47

kooskoos

4,9391 gold badge17 silver badges31 bronze badges

Collectives™ on Stack Overflow

Can't update a nested object's property using Redux

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related