英文:
Redux Toolkit "action.payload" query
问题
action.payload 是 Redux Toolkit 中用来传递数据的一个常见约定。在你提供的 TypeScript 代码中，它被用在 Redux 的 action 创建函数中。
在这个上下文中，action.payload 包含了传递给 reducer 函数的数据。它的目的是将需要更新状态的数据打包成一个对象，然后在 reducer 函数中使用这个对象来更新 Redux store 的状态。
在你的代码中，有两个 reducers：setUser 和 setLoading。这两个 reducers 都接受一个 action 参数，其中 action.payload 是传递给 reducer 的数据。
例如，setUser reducer 中的 action.payload 包含一个字符串（可能是用户的电子邮件地址或 null）。在这个 reducer 中，它被用来更新 Redux store 中的 state.user.email。
类似地，setLoading reducer 中的 action.payload 是一个布尔值，用来更新 state.isLoading。
总之，action.payload 是 Redux Toolkit 中的一种常见惯例，用来传递数据给 reducer 函数，以便更新 Redux store 中的状态。这有助于使代码更具可维护性和可读性，因为它清晰地表明了数据是如何流动和在 reducer 中被使用的。
英文:
const userSlice = createSlice({
name: 'user',
initialState,
reducers: {
// User k set korche
setUser: (state, action: PayloadAction<string | null>) => {
state.user.email = action.payload;
},
setLoading: (state, action: PayloadAction<boolean>) => {
state.isLoading = action.payload;
},
},
});
I want to clear the concept of action.payload. Why I use it here and what does it do.
答案1
得分: 1
以下是翻译好的部分：
给定 Redux-Toolkit（RTK）切片：
const userSlice = createSlice({
name: 'user',
initialState,
reducers: {
// 用户k set korche
setUser: (state, action: PayloadAction<string | null>) => {
state.user.email = action.payload;
},
setLoading: (state, action: PayloadAction<boolean>) => {
state.isLoading = action.payload;
},
},
});
并假设的导出：
export const { setUser, setLoading } = userSlice.actions;
export default userSlice.reducer;
此切片生成一些内容，但最重要的是它生成了上面的导出：
- 基于您声明的 reducer 函数生成
setUser和setLoading动作函数。 - 切片 reducer 函数，当创建 store 对象时将其传递给 store，或与其他 reducer 结合以形成 reducer 树，例如
configureStore。
我想要澄清 action.payload 的概念。我在这里为什么使用它，它是做什么的？
所有 Redux 动作函数都返回一个动作对象，例如具有 type 属性的对象。由 RTK 生成的动作返回具有 payload 属性的动作对象。这就是您在 reducer 函数中看到的 action.payload。
例如，如果您从用户界面分派 setUser 动作。
dispatch(setUser("Drew"));
dispatch(setUser(null));
这首先调用 setUser 动作，传递字符串参数 "Drew"|null，并返回一个动作对象 { type: "user/setUser", payload: "Drew" }|{ type: "user/setUser", payload: null }，该对象传递给 dispatch 函数，类似于 dispatch({ type: "user/setUser", payload: "Drew" })，以传递给 reducer 树。
然后，setReducer reducer 函数处理此 user/setUser 动作类型，并访问动作对象的 payload 属性。
setUser: (state, action: PayloadAction<string | null>) => {
state.user.email = action.payload; // "Drew" 或 null
}
结果是将存储中的 state.user.email 设置为 payload 值 "Drew"。
类似地，您可以使用 setLoading 动作分派布尔值。
dispatch(setLoading(true));
setLoading: (state, action: PayloadAction<boolean>) => {
state.isLoading = action.payload; // true
}
英文:
Given the Redux-Toolkit (RTK) slice:
> const userSlice = createSlice({
> name: 'user',
> initialState,
> reducers: {
> // User k set korche
> setUser: (state, action: PayloadAction<string | null>) => {
> state.user.email = action.payload;
> },
> setLoading: (state, action: PayloadAction<boolean>) => {
> state.isLoading = action.payload;
> },
> },
> });
and assumed exports:
export const { setUser, setLoading } = userSlice.actions;
export default userSlice.reducer;
This slice generates a few things, but most notably it generates the exports above:
- Generates
setUserandsetLoadingaction functions based on the reducer functions you have declared. - A slice reducer function that is passed to the store, or combined with other reducers to form a reducer tree, when the store object is created. e.g.
configureStore.
> I want to clear the concept of action.payload. Why I use it here and
> what does it do?
All Redux action functions return an action object, e.g. an object with a type property. RTK-generated actions return action objects with a payload property. This is the action.payload you see in the reducer functions.
If for example you dispatch the setUser action from the UI.
dispatch(setUser("Drew"));
dispatch(setUser(null));
This first calls the setUser action with the string argument "Drew"|null, and returns an action object { type: "user/setUser", payload: "Drew" }|{ type: "user/setUser", payload: null } that is passed to the dispatch function, similar to dispatch({ type: "user/setUser", payload: "Drew" }), to be passed to the reducer tree.
The setReducer reducer function then handles this "user/setUser" action type and accesses the action object's payload property.
setUser: (state, action: PayloadAction<string | null>) => {
state.user.email = action.payload; // "Drew" or null
}
The result is that state.user.email is set to the payload value "Drew" in the store.
Similarly you can dispatch a boolean value with the setLoading action.
dispatch(setLoading(true));
setLoading: (state, action: PayloadAction<boolean>) => {
state.isLoading = action.payload; // true
},
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论