React Native结合Redux Toolkit触发dispatch后state未更新问题求助

问题根源 #

你在reducer中使用的state = 新对象写法不符合Redux Toolkit的更新规则：
Redux Toolkit底层基于Immer库实现不可变更新，仅支持两种合法的state更新写法：

• 直接修改state参数的属性值，Immer会自动生成新的不可变state对象
• 直接return新的state对象，代替原有state

你当前的写法只是给reducer函数的局部参数变量state重新赋值，既没有修改原state的属性，也没有将新对象作为返回值返回，Immer感知不到更新操作，因此store的状态不会发生任何变化。

修复方案 #

有两种等价的修改方式，任选其一即可：

方式1：返回新的state对象 #

直接删除state赋值操作，把新对象作为返回值返回：

reducers: {
  mergeInNotebook: (
    state: Notebook,
    action: PayloadAction<Partial<Notebook>>
  ) => {
    const newState = { ...state, ...action.payload };
    console.log('DEBUG > mergeInNotebook > state = ', newState);
    return newState;
  },
  clearNotebook: () => {
    return emptyNotebook;
  },
},

方式2：使用Immer可变修改语法 #

直接修改state的属性，不需要返回值：

reducers: {
  mergeInNotebook: (
    state: Notebook,
    action: PayloadAction<Partial<Notebook>>
  ) => {
    Object.assign(state, action.payload);
    console.log('DEBUG > mergeInNotebook > state = ', state);
  },
  clearNotebook: (state: Notebook) => {
    Object.assign(state, emptyNotebook);
  },
},

修改完成后重新运行代码，即可在Redux DevTools和selector中看到state的更新结果。

内容的提问来源于stack exchange，提问作者Xiiryo