时间戳

首页 > 解决方案 > 如何使用 React 和 TypeScript 修改 reduxjs/toolkit 中的状态

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

问题描述

当我使用 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);
    },
}

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

标签： reactjsreact-reduxredux-toolkit

解决方案

请参阅变异和返回状态文档

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)
    }
  }
})

推荐阅读