如何使用 React 和 TypeScript 修改 reduxjs/toolkit 中的状态答案

【问题标题】：How to modify state in reduxjs/toolkit with React and TypeScript如何使用 React 和 TypeScript 修改 reduxjs/toolkit 中的状态
【发布时间】：2021-11-08 20:30:22
【问题描述】：

当我使用 react-redux 时，我更新了这样的状态：

case CartActionTypes.ADD_ITEM:
  return {
    ...state,
   cartItems: [...cartItems, { action.payload }];
  };

现在我将 reduxjs/toolkit 与切片等一起使用。

我应该以相同的方式更新状态还是使用 .push 方法，如下所示：

export const cartSlice = createSlice({
  name: 'cart',
  initialState: initialState,
  reducers: {
    addItemToCart(state, action) {
      state.cartItems.push(action.payload);
    },
}

我应该总是像以前那样返回状态

【问题讨论】：

标签： reactjs react-redux redux-toolkit

【解决方案1】：

见Mutating and Returning State文档

Immer 期望你要么改变现有的状态，要么自己构造一个新的状态值并返回它，但不能同时在同一个函数中！例如，这两个都是使用 Immer 的有效 reducer：

const todosSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    todoAdded(state, action) {
      // "Mutate" the existing state, no return value needed
      state.push(action.payload)
    },
    todoDeleted(state, action.payload) {
      // Construct a new result array immutably and return it
      return state.filter(todo => todo.id !== action.payload)
    }
  }
})

【讨论】：

【解决方案2】：

当您在 RTK createSlice 中定义减速器时，状态变为“可变”。因此，您可以使用push 更新您的状态而不返回它。

【讨论】：