redux-api-middleware如何向对应reducer传递自定义参数accountID

redux-api-middleware 支持在types配置中通过meta字段携带自定义参数，你需要的accountID可以直接存在meta里，请求完成后派发的action会自带该字段，reducer中可直接读取。

第一步：修改Action定义 #

把原来types数组里的字符串替换为带meta字段的配置对象，将闭包中拿到的accountID存入meta：

import { RSAA } from "redux-api-middleware";
import { API_ENDPOINT, AUTH_HEADERS } from "../util/constants";
import { ACCESS_TOKEN } from "../util";

export function getAccount(accountID) {
  return {
    [RSAA]: {
      endpoint: `${API_ENDPOINT}/api/Expense/GetAccount/${accountID}`,
      headers: {
        ...AUTH_HEADERS,
        Authorization: `Bearer ${ACCESS_TOKEN}`,
      },
      method: "GET",
      // 替换原字符串类型配置，用对象形式挂载自定义meta
      types: [
        {
          type: "GET_ACCOUNT_REQUEST",
          meta: { accountID }
        },
        {
          type: "GET_ACCOUNT_RECEIVE",
          meta: { accountID }
        },
        {
          type: "GET_ACCOUNT_FAILURE",
          meta: { accountID }
        }
      ],
    },
  };
}

第二步：修改Reducer逻辑 #

先把初始状态的payload改为空对象，适配多账户键值对的存储结构；再在对应处理分支中从action.meta读取accountID，按键更新数据即可：

import store from '../util/store';

const INITIAL_STATE = store.setInitialState({
  payload: {}, // 改为空对象，存储结构为 { [accountID]: 对应账户数据 }
  isFetching: false,
  isSuccess: false
});

const getAccountReducer = (state = INITIAL_STATE, action) => {
  const accountID = action.meta?.accountID;
  switch (action.type) {
    case "GET_ACCOUNT_REQUEST":
      return {
        ...state,
        isFetching: true,
      };
    case "GET_ACCOUNT_RECEIVE":
      return {
        ...state,
        isFetching: false,
        isSuccess: true,
        payload: {
          ...state.payload,
          [accountID]: action.payload
        },
      };
    case "GET_ACCOUNT_FAILURE":
      return {
        ...state,
        isFetching: false,
        isSuccess: false,
        payload: {
          ...state.payload,
          [accountID]: action?.payload?.response
        },
      };
    default:
      return state;
  }
};

export default getAccountReducer;

补充：如果需要同时发起多个不同accountID的请求，建议把isFetching、isSuccess也改成按accountID为键存储的结构，避免全局状态互相覆盖。

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