探索 Redux Toolkit 参数传递的4种途径

本文介绍了在ReduxToolkit中如何通过ActionCreator函数、extraReducers、异步操作回调、getState以及action.meta等方式传递参数。推荐使用ActionCreator传参，其他方式适用于特定场景，如处理异步操作和状态相关计算。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用Redux Toolkit 过程中，免不了需要传递参数的场景，Redux Toolkit提供了多种灵活的方式来传递参数,主要包括:

通过Action Creator函数传参(action.payload)
- 最常见、最推荐的做法
- 在reducer函数中直接访问action.payload获取参数
在extraReducers中传参(action.meta.arg)
- 适用于处理异步action的情况
- 在fulfilled/rejected回调中获取参数
通过getState获取参数
- 在异步thunk或middleware中获取当前state
- 从state中读取存储的参数值
通过action.meta传参
- 与action.payload类似,传递额外元数据
- 在reducer中直接访问action.meta获取参数

上述方法各有特色,需要根据具体场景来选择使用。通过Action Creator传参是最通用、直观的推荐方式,其他方式则侧重于特定的使用场合。Redux Toolkit提供了多种参数传递机制,使开发者能够灵活地满足不同的需求。
在这里插入图片描述

通过 Action Creator 函数传参

这是最常见的方式。在 Redux slice 中定义的 reducer 函数会接收到 action.payload 作为参数。

const counterSlice = createSlice({
   
  name: 'counter',
  initialState: 0,
  reducers: {
   
    increment(state, action) {
   
      // action.payload 可以从 Action Creator 函数接收参数
      return state + action.payload
    }
  }
})

// Action Creator 
const incrementByAmount = counterSlice.actions.increment

// 使用时传递参数
dispatch(incrementByAmount(3))

在 extraReducers 中传参

对于处理异步操作的 reducer,extraReducers 可以在 fulfilled/rejected 时获取传递的参数。

const fetchUserById = createAsyncThunk('users/fetchById', async (userId, thunkApi) => {
   
  const response = await fetchUser(userId)
  return response.data
})

const usersSlice = createSlice({
   
  name: 'users',
  initialState: [