Flux模式下Vanilla JS中是否需为每个状态单独设置Reducer？

关于「每个状态对应一个Reducer」的思路是否正确？ #

这个思路不完全合理，Reducer的拆分核心依据是状态的业务关联性，而非单个状态字段：

• 若状态属于同一业务域（比如用户信息里的name、age、email），应该放在同一个Reducer中管控，因为它们的更新逻辑往往互相关联，拆分单个字段为独立Reducer会导致逻辑分散、维护成本飙升。
• 只有当状态属于完全独立的业务模块时（比如购物车状态、用户状态、全局主题配置），拆分独立Reducer才是合理的——这样能让每个Reducer职责单一，便于单独维护和复用。

是否需要将多个Reducer合并为Root Reducer？ #

如果拆分了多个独立的子Reducer，必须合并为Root Reducer，原因如下：

• 符合Flux单向数据流的核心设计：Dispatcher需要统一接收Action，再由Root Reducer将Action分发给对应子Reducer处理，避免状态更新逻辑分散。
• 能清晰维护整个应用的状态树结构，每个子Reducer只负责自己的状态分支，避免状态管理混乱。
• 实现成本极低，完全可以用原生JS手写合并逻辑，无需依赖第三方库。

原生JS合并Reducer的简单示例 #

// 子Reducer：处理用户状态
function userReducer(state = { name: '', age: 0 }, action) {
  switch(action.type) {
    case 'UPDATE_USER_NAME':
      return { ...state, name: action.payload };
    case 'UPDATE_USER_AGE':
      return { ...state, age: action.payload };
    default:
      return state;
  }
}

// 子Reducer：处理购物车状态
function cartReducer(state = [], action) {
  switch(action.type) {
    case 'ADD_TO_CART':
      return [...state, action.payload];
    case 'REMOVE_FROM_CART':
      return state.filter(item => item.id !== action.payload);
    default:
      return state;
  }
}

// 合并为Root Reducer
function rootReducer(state = {}, action) {
  return {
    user: userReducer(state.user, action),
    cart: cartReducer(state.cart, action)
  };
}

// 使用示例
let currentState = {};
currentState = rootReducer(currentState, { type: 'UPDATE_USER_NAME', payload: 'Alice' });
currentState = rootReducer(currentState, { type: 'ADD_TO_CART', payload: { id: 1, name: 'Book' } });

总结 #

• 拒绝按单个状态字段拆分Reducer，按业务关联模块拆分才是合理的设计方式。
• 拆分后的子Reducer必须合并为Root Reducer，统一状态更新入口，保障Flux模式的数据流一致性。

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