无法使用 Redux 更新嵌套对象的属性

Question

在 React 中，我们有一个最佳实践，不要直接修改状态，即突变...... 这在 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
    }
};

上面的方法不起作用，但是任何人都可以帮助我如何正确更新嵌套对象属性吗？

Answer 1

看起来你都在改变状态并返回一个新的状态对象。您通过说

state.users.isLoggedIn = ..

来改变状态，然后通过执行

return Object.assign(...)

返回一个新的状态对象。

也许只是这样做

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

另一种方法是创建状态副本并修改它

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

Answer 2

你可以这样做

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