英文:
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问题,运行时设置断点也显示它确实为空:
然后我读了更多内容,听说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:
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 '@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;
The extraReducers
are primarily used to handle external actions, e.g. asynchronous actions and actions generated by other slices.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论