Redux中多个Reducer之间如何实现通信？

你现在的代码是把多个reducer按顺序串联起来，每个reducer接收前一个处理后的state继续处理——这种模式下，reducers之间的“通信”其实是通过共享的state传递信息，但如果想让它们更灵活地配合，或者某个reducer能触发其他reducer的逻辑，有这几个实用的方案：

1. 通过共享State结构传递信息 #

如果你的state是一个包含多个分片的对象（比如{ partA: {}, partB: {} }），每个reducer可以直接读取state中其他分片的数据来调整自己的处理逻辑。比如reducerB在处理action时，可以查看state.partA的状态，再决定怎么更新自己负责的分片。

举个实际例子：

const reducerA = (state, action) => {
  if (action.type === 'UPDATE_A') {
    return { ...state, partA: action.payload };
  }
  return state;
};

const reducerB = (state, action) => {
  if (action.type === 'UPDATE_B_BASED_ON_A') {
    // 直接读取reducerA处理后的partA状态
    const newBValue = state.partA.value * 2;
    return { ...state, partB: newBValue };
  }
  return state;
};

你的现有代码已经天然支持这种方式——因为每个reducer都能拿到完整的state对象，它们只要读取state的其他部分，就能实现“通信”。

2. 让同一个Action被多个Reducer响应 #

你可以设计一个action，让多个reducer都对它做出反应。比如触发'USER_LOGIN'这个action时，reducerA更新用户信息，reducerB重置购物车状态，reducerC加载用户的收藏列表——这本质上是通过同一个事件，让多个reducer协同工作。

你的串联逻辑已经支持这种模式：只要每个reducer都判断action.type并处理，同一个action会被所有reducer依次处理。

3. 把共享逻辑抽成工具函数 #

如果多个reducer需要用到相同的判断逻辑或者数据转换方法，把这些逻辑抽成独立的工具函数，让各个reducer调用它。这不仅能保证reducers之间的逻辑一致，也相当于通过共享函数实现了“间接通信”。

比如：

// 共享的工具函数，计算用户积分
const calculateUserScore = (userData) => {
  return userData.posts.length * 10 + userData.comments.length * 5;
};

// reducerA处理用户数据，调用工具函数计算积分
const reducerA = (state, action) => {
  if (action.type === 'UPDATE_USER') {
    const user = action.payload;
    return { ...state, user: { ...user, score: calculateUserScore(user) } };
  }
  return state;
};

// reducerB需要用到用户积分判断资格
const reducerB = (state, action) => {
  if (action.type === 'CHECK_ELIGIBILITY') {
    const isEligible = state.user.score > 100;
    return { ...state, eligibility: isEligible };
  }
  return state;
};

4. 用中间件触发后续Action #

如果某个reducer处理完后，需要触发另一个action让其他reducer继续处理，你可以用Redux中间件（比如redux-thunk或者redux-saga）来实现。

比如用redux-thunk的话，你可以写一个异步action creator，先触发第一个action，等reducer处理完后，再触发第二个action：

const updateAAndThenB = (payload) => {
  return (dispatch) => {
    // 先让reducerA处理
    dispatch({ type: 'UPDATE_A', payload });
    // 再触发reducerB的处理逻辑
    dispatch({ type: 'UPDATE_B_BASED_ON_A' });
  };
};

当你调用dispatch(updateAAndThenB(data))时，两个action会依次执行，reducerA的处理结果通过state传递给reducerB，完成一次“通信”。

5. 用高阶Reducer增强功能 #

你可以写一个高阶reducer，它能在传递action给目标reducer之前，先获取其他reducer的状态，或者修改action内容，让reducers之间能交换信息。

比如：

const withOtherReducerState = (targetReducer, otherReducerKey) => {
  return (state, action) => {
    // 获取其他reducer负责的状态片段
    const otherState = state[otherReducerKey];
    // 把其他状态作为额外参数传给目标reducer
    return targetReducer(state, action, otherState);
  };
};

// 增强reducerB，让它能直接拿到reducerA的状态
const enhancedReducerB = withOtherReducerState(reducerB, 'partA');

// 把增强后的reducerB加入你的reducers数组
const reducers = [reducerA, enhancedReducerB, ...otherReducers];

这样reducerB就能在处理action时直接拿到partA的状态，不用从整个state里手动读取，逻辑更清晰。

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