Redux Toolkit“action.payload”查询

fiei3ece  于 2023-08-05  发布在  其他
关注(0)|答案(1)|浏览(108)
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;
    },
  },
});

字符串
我想澄清action.payload的概念。我为什么在这里使用它,它是做什么的。

lawou6xi

lawou6xi1#

给定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.根据已声明的缩减器函数生成setUsersetLoading操作函数。
1.创建存储对象时传递给存储或与其他缩减器组合以形成缩减器树的切片缩减器函数。例如configureStore
我想澄清一下action.payload的概念。我为什么在这里使用它,它有什么作用?
所有Redux操作函数都返回一个操作对象,例如返回具有type属性的对象。RTK生成的操作返回带有payload属性的操作对象。这就是你在reducer函数中看到的action.payload
例如,如果您从UI分派setUser动作,

dispatch(setUser("Drew"));
dispatch(setUser(null));

的字符串
这将首先调用带有字符串参数"Drew"setUser操作|null,并返回一个操作对象{ type: "user/setUser", payload: "Drew" }| { type: "user/setUser", payload: null },它被传递到dispatch函数,与dispatch({ type: "user/setUser", payload: "Drew" })类似,以传递到约简树。
然后,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
},

的字符串

相关问题