reactjs - RTK Toolkit 如何通过 createSlice 将构建器语法与 Action 创建器一起使用？

Question

我在 Redux 方面经验丰富，但对 Redux Toolkit (RTK) 和 createSlice 完全陌生。我正在尝试遵循官方 RTK 查询文档上的教程，但我迷路了。

我已经创建了我的操作:(假设有一种名为“模型”的类型)

const setModel = createAction<Model>('setModel');

然后我定义了我的状态:

type MyState = {
  model: Model;
}

const initialState: MyState = {
  model: models[0], // points to a valid object of type Model
};

然后我尝试创建我的切片:

export const mySlice = createSlice({
  name: 'x',
  initialState,
  reducers: {
        
  },
  extraReducers: builder => {
    builder.addCase(setModel, (state, action) => {
      state.model = action.payload;
      return state;
    });
  },
});

文档似乎推荐使用 extraReducers 方法直接与操作对象和构建器一起使用，这似乎也隐式支持 Immer。所以我为 setModel 编写了简单的案例。但是，当我尝试在组件中使用它时:

const dispatch = useDispatch();
dispatch(mySlice.actions.setModel(pickedItem));

mySlice.actions 为空，并且不包含名为 setModel 的条目。这不是 TypeScript 问题，运行时设置断点也会显示它确实是空的:

然后我读了更多内容，听说 extraReducers 不会创建 Action 创建者，而 reducers 会创建(这可能解释了为什么我的 Action 是空的)。但是，这样我就无法使用 RTK Toolkit 首先推荐的构建器语法。

此时我完全迷失了。

如何将 createSlice 与强类型和自动生成的操作创建器一起使用，或者如果不可能，那么 createSlice 的推荐模式是什么？

Answer 1

How can I use createSlice with strongly-typed and autogenerated action creators?

您可以在切片中输入 reducer 的有效负载，将为您生成操作并正确输入。

示例:

import { createSlice } from '@reduxjs/toolkit';
import type { PayloadAction } from '@reduxjs/toolkit';

type MyState = {
  model: Model;
}

const initialState: MyState = {
  model: models[0],
};

const mySlice = createSlice({
  name: 'x',
  initialState,
  reducers: {
    setModel: (state, PayloadAction<Model>) => {
      state.model = action.payload;
    },
  },
});

export const {
  setModel
} = mySlice.actions;

export default mySlice.reducer;

extraReducers 主要用于处理外部操作，例如异步操作和其他切片生成的操作。