没有状态突变的 Typescript 的 Redux-toolkit 使用

Question

我正在开发一个在 JavaScript 中使用 Redux-Toolkit 的 React 项目。我正在尝试将项目转移到 TypeScript 以获得调试便利和类型安全优势。我的 Slices 代码是

export const entitiesSlice = createSlice({
    name: "entities",
    initialState: initialentitiesState,
    reducers: {
      // getentityById
      entityFetched: (state, action) => {
        state.actionsLoading = false;
        state.entityForEdit = action.payload.entityForEdit;
        state.error = null;
      },
      // findentities
      entitiesFetched: (state, action) => {
        const { totalCount, entities } = action.payload;
        state.listLoading = false;
        state.error = null;
        state.entities = entities;
        state.totalCount = totalCount;
      },
      // createentity
      entityCreated: (state, action) => {
        state.actionsLoading = false;
        state.error = null;
        state.entities.push(action.payload.entity);
      },
      // updateentity
      entityUpdated: (state, action) => {
        state.error = null;
        state.actionsLoading = false;
        state.entities = state.entities.map(entity => {
          if (entity.id === action.payload.entity.id) {
            return action.payload.entity;
          }
          return entity;
        });
      },
      // deleteentities
      entitiesDeleted: (state, action) => {
        state.error = null;
        state.actionsLoading = false;
        state.entities = state.entities.filter(
          el => !action.payload.ids.includes(el.id)
        );
      },
      }
    }
  });

但我认为像这样的赋值 state.somevar=updatedval 正在做状态突变，这是不好的。我想用只读声明我的状态接口以避免状态突变。我已经完成了 Redux-Toolkit-Usage-With-Typescript，我认为这应该避免状态突变，但所有代码片段似乎都在进行状态突变。我想要这样的东西

      entityFetched: (state, action) => {
        return {
          ...state,
          actionsLoading:false,
          entityForEdit:action.payload.entityForEdit,
          error:null
        }
      }

如果我遗漏了什么或误解了状态突变的含义，请指导我。任何关于将 TypeScript 与 React 结合使用的更广泛的建议都将受到欢迎！非常感谢！

Answer 1

Redux Toolkit 的 createReducer 和 createSlice API 在内部使用 the Immer library，这允许您在 reducer 中编写“可变”语法，但将其转化为安全且正确的不变更新。

请通读 the new "Redux Essentials" core docs tutorial 以进一步解释 Redux 如何依赖不变性，以及 Immer 如何确保在 reducer 中安全地编写“突变”。

没有状态突变的 Typescript 的 Redux-toolkit 使用

Redux-toolkit usage with Typescript without state mutation

javascript

typescript

reactjs

redux

redux-toolkit