不同应用状态层级下Reducer复用的实现方法（附场景示例）

嘿，这个复用reducer的需求我太熟了！当多个模块（比如用户、帖子）都要处理照片数组时，重复写相同的增删逻辑确实很冗余，我给你整理了一套清晰的实现方案，完全贴合你提到的思路：

1. 先明确咱们已有的基础Photos Reducer #

这部分是核心的照片处理逻辑，咱们要把它复用在用户和帖子模块里：

// photosReducer.js
import { ADD_PHOTO, REMOVE_PHOTO } from '../actions/types';

const photosReducer = (state = [], action) => {
  switch (action.type) {
    case ADD_PHOTO:
      return [...state, action.payload];
    case REMOVE_PHOTO:
      return state.filter(photo => photo.id !== action.payload.id);
    default:
      return state;
  }
};

export default photosReducer;

2. 构建用户模块的Reducer与Action Creator #

2.1 先定义UPDATE_USER的动作类型 #

// actions/types.js
export const UPDATE_USER = 'UPDATE_USER';

2.2 编写updateUser Action Creator #

这个方法的作用是“传递指令”：告诉users reducer要更新哪个用户，以及要对该用户的照片执行什么操作（比如添加/删除）：

// actions/userActions.js
import { UPDATE_USER } from './types';

export const updateUser = (id, subAction) => ({
  type: UPDATE_USER,
  payload: { id, subAction }
});

2.3 用Immutable.js实现Users Reducer #

这里咱们用Immutable.js来保证状态的不可变性，核心逻辑是：收到UPDATE_USER动作后，找到目标用户，然后调用已有的photos reducer来处理其照片数组：

// reducers/usersReducer.js
import { Map, List } from 'immutable';
import { UPDATE_USER } from '../actions/types';
import photosReducer from './photosReducer';

const initialState = Map(); // 状态结构：{ 用户ID: { id: xxx, photos: List() } }

const usersReducer = (state = initialState, action) => {
  switch (action.type) {
    case UPDATE_USER:
      const { id, subAction } = action.payload;
      // 如果目标用户不存在，直接返回原状态
      if (!state.has(id)) return state;
      
      // 获取用户当前的照片列表，交给photosReducer处理子动作
      const userPhotos = state.getIn([id, 'photos'], List());
      const updatedPhotos = photosReducer(userPhotos.toJS(), subAction);
      
      // 更新该用户的照片列表
      return state.setIn([id, 'photos'], List(updatedPhotos));
    default:
      return state;
  }
};

export default usersReducer;

3. 组合所有Reducers #

最后用Redux的combineReducers把users reducer和其他需要复用photos逻辑的reducer（比如posts reducer，实现思路和users完全一致）整合到根reducer里：

// reducers/index.js
import { combineReducers } from 'redux';
import usersReducer from './usersReducer';
import postsReducer from './postsReducer'; // 帖子模块同理实现嵌套照片处理

const rootReducer = combineReducers({
  users: usersReducer,
  posts: postsReducer
});

export default rootReducer;

4. 实际使用示例 #

在组件里分发动作时，只需要先创建照片相关的子动作，再传给updateUser就行：

// 比如在用户组件中添加照片
import { addPhoto } from '../actions/photoActions'; // 假设这是生成ADD_PHOTO动作的creator
import { updateUser } from '../actions/userActions';

// 分发添加照片的动作
dispatch(updateUser(currentUserId, addPhoto(newPhoto)));

// 删除照片也是一样的逻辑
dispatch(updateUser(currentUserId, removePhoto(photoId)));

这套方案的优势： #

• 完全复用了photos reducer的核心逻辑，彻底避免代码重复
• 通过嵌套子动作的方式，保持了action的语义清晰，容易维护
• 用Immutable.js确保了状态更新的不可变性，杜绝意外的状态突变

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