如何在Redux Toolkit的action中传递多个参数

Redux Toolkit 中所有 action 仅支持传入单个参数作为 payload，如果你需要传递多个参数，只需要把所有参数封装成一个对象作为唯一的 payload 传入即可。

代码示例 #

1. Slice 中reducer定义

import { createSlice, PayloadAction } from '@reduxjs/toolkit'

const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0,
    note: ''
  },
  reducers: {
    // 单参数原生写法
    incrementByAmount: (state, action: PayloadAction<number>) => {
      state.value += action.payload
    },
    // 多参数适配写法，把所有参数放在一个对象里作为payload
    incrementByMultiParams: (state, action: PayloadAction<{amount: number, remark: string}>) => {
      state.value += action.payload.amount
      state.note = action.payload.remark
    }
  }
})

2. 调用action的写法

// 单参数调用
dispatch(incrementByAmount(3))

// 多参数调用，统一传一个对象即可
dispatch(incrementByMultiParams({
  amount: 5,
  remark: "本次新增5个计数"
}))

这种写法同时兼容 TypeScript 类型校验，你只需要在 PayloadAction 的泛型里定义好 payload 对象的字段和对应类型，调用时如果传入的字段不匹配会自动触发类型错误提示，不需要额外配置其他逻辑。

内容的提问来源于stack exchange，提问作者Fotios Tsakiris