Typescript Redux 工具包action.payload查询

给定Redux-Toolkit(RTK)切片:

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;
    },
  },
});

并假设出口:

export const { setUser, setLoading } = userSlice.actions;
export default userSlice.reducer;

这个片段生成了一些东西，但最值得注意的是，它生成了上面的导出:

1. 根据已声明的减法器函数生成setUser和setLoading个动作函数.
2. 在创建存储对象时传递给存储或与其他减少程序组合以形成减少器树的切片减少器函数.例如configureStore.

我想澄清action.payload的概念.为什么我在这里使用它，以及 是干什么的呢？

所有Redux操作函数都返回一个操作对象，例如具有type属性的对象.RTK生成的操作返回具有payload属性的操作对象.这是您在减速器功能中看到的action.payload.

例如，如果您从UI调度setUser操作.

dispatch(setUser("Drew"));

dispatch(setUser(null));

这首先使用字符串参数"Drew"|null调用setUser操作，并返回一个操作对象{ 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" or null
}

结果是将state.user.email设置为存储中的有效负载值"Drew".

同样，您可以使用setLoading操作来分派布尔值.

dispatch(setLoading(true));

setLoading: (state, action: PayloadAction<boolean>) => {
  state.isLoading = action.payload; // true
},