你究竟应该从 redux slice reducer return 得到什么？

Question

今天我有一个错误，当我的 redux 状态改变时，我使用 useSelector 的组件不会重新渲染。快速阅读 createSlice 文档后，我注意到他们正在 returning state.something = action.payload，而我没有这样做。

所以在这段代码中：

const personSlice = createSlice({
  name: "person",
  initialState,
  reducers: {
    setToken: (state, action) => {
      state.token = action.payload;
    },
    setUser: (state, action) => {
      state = { ...state, ...action.payload };
    },
  },
});

当我设置令牌时，我的应用程序会更新并且运行良好。但是在调度 setUser 操作之后，我依赖于 person 状态的组件没有得到重新渲染。但是为什么当我在没有 returning 的情况下设置令牌时它会起作用？

我将代码更改为：

const personSlice = createSlice({
  name: "person",
  initialState,
  reducers: {
    setToken: (state, action) => {
      state.token = action.payload;
    },
    setUser: (state, action) => {
      return state = { ...state, ...action.payload };
    },
  },
});

一切正常，即使 setToken 中没有 return。

所以我想我的最终问题是，切片中到底发生了什么，为什么以及我需要从操作中 return 做什么？

Answer 1

createSlice里面用的是Immer。 Immer 的作品来自：

跟踪突变到现有的 state 对象，例如 state.x = 123
让你 return 一个新值，比如 `return {...state, x: 123}

分配 state = anything 不是突变，也不会 return 任何东西。它只是重新分配名为 state 的 局部变量以指向其他内容。

如果你想“合并”一些数据，那么是的，你需要 return {...state, ...someData}，或者使用 Object.assign(state, someData) 来“改变”现有的 state 对象。

请参阅涵盖此主题的 the Redux Toolkit "Writing Reducers with Immer" usage guide。

你究竟应该从 redux slice reducer return 得到什么？

What exactly should you return from a redux slice reducer?

reactjs

redux

redux-toolkit