你到底应该从 redux slice reducer 返回什么？

Question

今天我有一个错误，useSelector当我的 redux 状态改变时，我正在使用的组件不会重新渲染。快速阅读createSlice文档后，我注意到他们正在返回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状态的组件没有被重新渲染。但是为什么当我设置令牌而不返回时它会起作用？

我把我的代码改成这样：

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

一切正常，即使没有returnin setToken。

所以我想我的最终问题是，切片中究竟发生了什么，为什么以及我需要从动作中返回什么？

Answer 1

createSlice在里面使用 Immer。Immer 通过以下任一方式工作：

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

分配state = anything不是突变，它不会返回任何内容。它只是将名为state的局部变量重新分配为指向其他内容。

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

请参阅Redux Toolkit“Writing Reducers with Immer”使用指南，其中涵盖了该主题。