RTK Toolkit如何在createSlice中使用构建器语法与action creators?

huangapple go评论74阅读模式
英文:

RTK Toolkit how to use builder syntax with action creators with createSlice?

问题

我对Redux有经验,但对Redux Toolkit(RTK)和createSlice完全不了解。我尝试遵循官方RTK Query文档上的教程,但感到困惑。

我已经创建了我的动作:(假设有一个叫做'Model'的类型)

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

然后我定义了我的状态:

type MyState = {
  model: Model;
}

const initialState: MyState = {
  model: models[0], //指向Model类型的有效对象
};

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

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

文档似乎推荐使用extraReducers方法来处理动作对象和builder,这种方法似乎也隐含支持Immer。所以我为setModel编写了一个简单的例子。然而,当我尝试在组件中使用它时:

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

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

RTK Toolkit如何在createSlice中使用构建器语法与action creators?

然后我读了更多内容,听说extraReducers不会创建动作创建者,而reducers会(这可能解释了为什么我的动作为空)。然而,我无法使用RTK Toolkit首先推荐的builder语法。

这一点上我完全迷失了。

如何使用具有强类型和自动生成动作创建者的createSlice,或者如果不可能的话,对于createSlice,有什么推荐的模式?

英文:

I'm experienced in Redux but I'm totally new to Redux Toolkit (RTK) and createSlice. I'm trying to follow tutorials on official RTK Query docs but I'm getting lost.

I've created my actions: (assume there is a type called 'Model')

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

Then I've defined my state:

type MyState = {
  model: Model;
}

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

Then I try to create my slice:

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

The docs seem to recommend the extraReducers approach to use with action objects and builder directly, which also seems to implicitly support Immer. So I wrote my simple case for setModel. However, when I try to use it in a component:

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

mySlice.actions is empty and doesn't include an entry named setModel. It's not a TypeScript issue, putting a breakpoint when running also reveals that it's indeed empty:

RTK Toolkit如何在createSlice中使用构建器语法与action creators?

Then I've read more and heard that extraReducers doesn't create action creators, whereas reducers does (which probably explains why my actions are empty). However, then I can't use the builder syntax which RTK Toolkit recommends in the first place.

At this point I'm totally lost.

How can I use createSlice with strongly-typed and autogenerated action creators, or if that's not possible, what's the recommended pattern for createSlice?

答案1

得分: 3

> 如何使用 createSlice 与强类型和自动生成的动作创建者?

你可以在切片的 reducer 中键入 reducers 的载荷,动作将为您生成并正确键入。

示例:

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 主要用于处理外部动作,例如异步动作和其他切片生成的动作。

英文:

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

You can type the payloads of the reducers in the slice, the actions will be generated for you, and be correctly typed.

Example:

import { createSlice } from &#39;@reduxjs/toolkit&#39;;
import type { PayloadAction } from &#39;@reduxjs/toolkit&#39;;

type MyState = {
  model: Model;
}

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

const mySlice = createSlice({
  name: &#39;x&#39;,
  initialState,
  reducers: {
    setModel: (state, PayloadAction&lt;Model&gt;) =&gt; {
      state.model = action.payload;
    },
  },
});

export const {
  setModel
} = mySlice.actions;

export default mySlice.reducer;

The extraReducers are primarily used to handle external actions, e.g. asynchronous actions and actions generated by other slices.

huangapple
  • 本文由 发表于 2023年5月17日 12:35:24
  • 转载请务必保留本文链接:https://go.coder-hub.com/76268584.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定