Redux Toolkit多参数Action创建与派发问题求助

没问题，我来帮你搞定Redux Toolkit里多参数Action的处理～其实核心思路是把多个参数打包成一个对象作为payload传递，或者手动自定义符合你原有调用习惯的Action创建函数，下面给你具体的实现方式：

方法1：将多参数打包为对象传递（推荐，符合RTK设计习惯） #

Redux Toolkit自动生成的Action创建函数默认只接受一个参数作为action.payload，所以我们可以把需要传递的多个参数封装成一个对象，在reducer里解构出来使用。

示例代码： #

import { createSlice, configureStore } from '@reduxjs/toolkit';

// 创建slice
const activitySlice = createSlice({
  name: 'activity',
  initialState: {
    activity: undefined,
    anotheractivity: undefined
  },
  reducers: {
    clickedActivity: (state, action) => {
      // 从payload中解构出两个参数
      const { first, second } = action.payload;
      state.activity = first;
      state.anotheractivity = second;
    }
  }
});

// 导出自动生成的Action创建函数
export const { clickedActivity } = activitySlice.actions;

// 创建store
const store = configureStore({
  reducer: {
    activity: activitySlice.reducer
  }
});

// 派发Action时，传递包含两个参数的对象
store.dispatch(clickedActivity({ first: '跑步', second: '游泳' }));

方法2：手动自定义多参数的Action创建函数 #

如果你想完全保留原有代码中dispatch(clickedActivity(first, second))的调用方式，可以手动编写Action创建函数，而不用RTK自动生成的版本：

示例代码： #

import { createSlice, configureStore } from '@reduxjs/toolkit';

// 手动编写接受两个参数的Action创建函数
export const clickedActivity = (first = undefined, second = undefined) => {
  return {
    // Type格式必须是「slice名称/reducer名称」，和createSlice中的定义对应
    type: 'activity/clickedActivity',
    payload: { first, second }
  };
};

// 创建slice，reducer部分和方法1一致
const activitySlice = createSlice({
  name: 'activity',
  initialState: {
    activity: undefined,
    anotheractivity: undefined
  },
  reducers: {
    clickedActivity: (state, action) => {
      const { first, second } = action.payload;
      state.activity = first;
      state.anotheractivity = second;
    }
  }
});

// 创建store
const store = configureStore({
  reducer: {
    activity: activitySlice.reducer
  }
});

// 按照原有习惯派发Action
store.dispatch(clickedActivity('跑步', '游泳'));

补充说明 #

两种方法都能解决你的问题，其中方法1更符合Redux Toolkit的设计规范，推荐优先使用；方法2则可以完全兼容你原有代码的调用方式，适合过渡阶段使用。

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