如何使用 Redux 只更改一个参数？

Question

我尝试使用 Redux 更新我的全局状态，但我尝试只更新五个参数中的一个，而不是全部。

我的商店代码如下：

const initialState = {
    loggedIn: false,
    thisUser: {}
}

export function usersReducer(state = initialState, action) {
    switch (action.type) {
        case 'users/loggedIn':
            return { ...state, loggedIn: action.payload }
        case 'users/addUser':
            return { ...state, thisUser: action.payload }
        default:
            return state
    }
}

我试着写了一个新案例，但是没有用：

case 'users/setActivated':
            return { ...state, thisUser.activated: action.payload }

VS Code 不允许我写“.activated”

我的调度看起来像：

dispatch({ type: 'users/setActivated', payload: 1 })

怎么了？

Answer 1

嗯，你的语法是错误的，就是这样。 :)

case 'users/setActivated':
    return { ...state, thisUser: {...state.thisUser, activated: action.payload} }

是您 shallow-merge state 需要 shallow-merged 嵌套对象。

请注意，深入研究这样的对象很快就会变得很老，您可能想看看例如immer.

Answer 2

我明白你为什么这样做了，你觉得这很合乎逻辑，但它行不通。

 const state = {
    ...state,
    [thisUser.activated]: action.payload
  };

因此您的目标是将状态更新为如下所示：

{
    loggedIn: true,
    thisUser: {
      //other properties ,
      activated: 1,
    }
  }

首先，这是您所做操作的输出：

{
    loggedIn: true,
    thisUser: {
      //other properties ,
      activated: 0,
    },
    activated: 1,
  };

其次，JavaScript 不接受此 thisUser.activated 作为密钥。

解决方法：

 {
    ...state,
    thisUser: { 
      ...state.thisUser, 
      activated: action.payload
    },
  };

如何使用 Redux 只更改一个参数？

How to change just one parameter using Redux?

javascript

reactjs

redux