CODEWITHSUNDEEP
reactjsredux
Antonio Pavicevac-Ortiz
Antonio Pavicevac-Ortiz

Reputation: 7739

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

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?

Upvotes: 0

Views: 763

Answers (2)

kooskoos
kooskoos

Reputation: 4869

You can do this

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

Upvotes: 1

Brian Thompson
Brian Thompson

Reputation: 14375

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;
}

Upvotes: 1

Related Questions