React-Redux中如何创建可复用的通用Reducer？

嘿，我完全懂你现在的困惑——想把同一个reducer逻辑复用在store里不同路径的c节点上，虽然看了文档但还是摸不着头绪对吧？别担心，我结合你的状态结构{ a: { b: { c: {...} } }, d: { c: {...} } }给你一步步讲清楚怎么实现～

第一步：先确认你的基础c节点Reducer #

假设你已经写好了针对c节点的核心逻辑，比如这样：

// 基础cReducer，处理所有c节点的通用操作（更新字段、重置等）
const cReducer = (state = {}, action) => {
  switch(action.type) {
    case 'UPDATE_C_FIELD':
      return { ...state, [action.payload.key]: action.payload.value };
    case 'RESET_C':
      return {};
    // 其他c节点的操作逻辑
    default:
      return state;
  }
};

这个reducer只负责处理c节点本身的状态变化，不关心它在store中的父路径，这是复用的基础。

第二步：在父Reducer中复用cReducer #

因为a和d是通过combineReducers组合的独立reducer分支，我们需要让这两个父reducer能够识别“针对自己分支下c节点的action”，然后调用cReducer更新对应的子状态。

方法1：直接在父Reducer中添加判断逻辑 #

处理a分支的reducer：

// 管理a节点的reducer，包含b -> c的层级
const aReducer = (state = { b: { c: {} } }, action) => {
  // 通过action的meta.target判断是否要更新a.b.c
  if (action.meta?.target === 'a.b.c') {
    // 取出当前a.b.c的状态，传给cReducer得到更新后的状态
    const updatedC = cReducer(state.b.c, action);
    // 把更新后的c放回原位置，保持其他状态不变
    return {
      ...state,
      b: {
        ...state.b,
        c: updatedC
      }
    };
  }

  // 处理a分支自己的专属逻辑
  switch(action.type) {
    case 'UPDATE_A_FIELD':
      return { ...state, [action.payload.key]: action.payload.value };
    // 其他a分支的操作
    default:
      return state;
  }
};

处理d分支的reducer：

// 管理d节点的reducer，直接包含c节点
const dReducer = (state = { c: {} }, action) => {
  if (action.meta?.target === 'd.c') {
    const updatedC = cReducer(state.c, action);
    return {
      ...state,
      c: updatedC
    };
  }

  // 处理d分支自己的专属逻辑
  switch(action.type) {
    case 'UPDATE_D_FIELD':
      return { ...state, [action.payload.key]: action.payload.value };
    // 其他d分支的操作
    default:
      return state;
  }
};

方法2：用高阶函数封装复用逻辑（更优雅） #

如果有很多父reducer需要复用cReducer，写重复的判断逻辑太麻烦，我们可以用高阶函数把复用逻辑封装起来：

// 高阶函数：接收目标节点标识和父状态中c节点的路径处理函数，返回包装后的父reducer
const wrapWithCReducer = (target, getCState, updateCState) => (parentReducer) => {
  return (state, action) => {
    if (action.meta?.target === target) {
      // 取出当前c状态，调用cReducer更新
      const currentC = getCState(state);
      const updatedC = cReducer(currentC, action);
      // 更新父状态中的c节点
      return updateCState(state, updatedC);
    }
    // 处理父reducer自己的逻辑
    return parentReducer(state, action);
  };
};

// 包装aReducer：指定目标是a.b.c，定义如何获取和更新a中的c
const wrappedAReducer = wrapWithCReducer(
  'a.b.c',
  (state) => state.b.c,
  (state, updatedC) => ({
    ...state,
    b: { ...state.b, c: updatedC }
  })
)(aReducer);

// 包装dReducer：指定目标是d.c
const wrappedDReducer = wrapWithCReducer(
  'd.c',
  (state) => state.c,
  (state, updatedC) => ({ ...state, c: updatedC })
)(dReducer);

第三步：创建带目标标识的Action #

要让父reducer知道该更新哪个c节点，我们需要在action中添加meta.target字段来标记目标路径：

// 更新a.b.c的action
export const updateAB_C = (key, value) => ({
  type: 'UPDATE_C_FIELD',
  payload: { key, value },
  meta: { target: 'a.b.c' }
});

// 更新d.c的action
export const updateD_C = (key, value) => ({
  type: 'UPDATE_C_FIELD',
  payload: { key, value },
  meta: { target: 'd.c' }
});

// 重置a.b.c的action
export const resetAB_C = () => ({
  type: 'RESET_C',
  meta: { target: 'a.b.c' }
});

第四步：组合所有Reducer #

最后用combineReducers组合包装后的reducer（如果用方法2）或者原始的父reducer（方法1）：

import { combineReducers } from 'redux';

const rootReducer = combineReducers({
  a: wrappedAReducer, // 或者aReducer（方法1）
  d: wrappedDReducer  // 或者dReducer（方法1）
});

额外推荐：用Redux Toolkit简化复用 #

如果你用Redux Toolkit（现在官方推荐的写法），可以用createSlice和addMatcher更简洁地实现复用：

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

// 创建c节点的slice
const cSlice = createSlice({
  name: 'c',
  initialState: {},
  reducers: {
    updateField: (state, action) => {
      state[action.payload.key] = action.payload.value;
    },
    reset: () => ({})
  }
});

// 导出c的action，调用时加上meta.target
export const { updateField, reset } = cSlice.actions;

// 创建a节点的slice，复用c的reducer
const aSlice = createSlice({
  name: 'a',
  initialState: { b: { c: {} } },
  reducers: {
    // a分支自己的action
  },
  extraReducers: (builder) => {
    // 匹配所有c的action，且目标是a.b.c
    builder.addMatcher(
      (action) => action.type.startsWith('c/') && action.meta?.target === 'a.b.c',
      (state, action) => {
        state.b.c = cSlice.reducer(state.b.c, action);
      }
    );
  }
});

// 创建d节点的slice，复用c的reducer
const dSlice = createSlice({
  name: 'd',
  initialState: { c: {} },
  reducers: {
    // d分支自己的action
  },
  extraReducers: (builder) => {
    builder.addMatcher(
      (action) => action.type.startsWith('c/') && action.meta?.target === 'd.c',
      (state, action) => {
        state.c = cSlice.reducer(state.c, action);
      }
    );
  }
});

const rootReducer = combineReducers({
  a: aSlice.reducer,
  d: dSlice.reducer
});

核心思路其实很简单：让通用的子reducer只关心自身状态，通过action的元信息标记目标路径，父reducer根据标记调用子reducer更新对应位置的状态。这样不管你的c节点在store的哪个路径下，都能复用同一套逻辑啦～

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