redux RTK工具包如何使用createSlice的动作创建器的构建器语法?

7kjnsjlb  于 2023-05-18  发布在  其他
关注(0)|答案(1)|浏览(156)

我在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 creators,而reducers可以(这可能解释了为什么我的action是空的)。但是,我不能使用RTK工具包首先推荐的构建器语法。
在这一点上我完全迷失了。
如何将createSlice与强类型和自动生成的操作创建器一起使用,或者如果不可能,createSlice的推荐模式是什么?

bwleehnv

bwleehnv1#

如何将createSlice与强类型和自动生成的动作创建器一起使用?
您可以在切片中输入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主要用于处理***外部***操作,例如异步动作和由其他片生成的动作。

相关问题