React/Redux 中如何优雅地复用 Reducer 逻辑

React/Redux 中如何优雅地复用 Reducer 逻辑

redux 项目地址: https://gitcode.com/gh_mirrors/red/redux

引言

在大型 React/Redux 应用中，随着业务逻辑的复杂化，我们经常会遇到需要在不同地方处理相似数据逻辑的情况。本文将深入探讨如何在 Redux 中高效地复用 reducer 逻辑，避免代码重复，同时保持应用的可维护性和可扩展性。

为什么需要复用 Reducer

在 Redux 架构中，reducer 负责处理应用状态的变化。当应用规模扩大时，我们可能会发现：

1. 多个 reducer 在处理相似的数据结构
2. 需要对同一类型的数据创建多个实例
3. 需要为不同数据片段应用相同的处理逻辑

直接复制粘贴 reducer 代码会导致维护困难，因此我们需要寻找更优雅的解决方案。

基础示例：计数器的问题

让我们从一个简单的计数器示例开始：

function counter(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

const rootReducer = combineReducers({
  counterA: counter,
  counterB: counter,
  counterC: counter
})

这个实现有一个明显的问题：当我们派发 {type: 'INCREMENT'} 动作时，所有三个计数器都会增加，而通常我们只需要更新其中一个。

高阶 Reducer 模式

高阶 Reducer（Higher-Order Reducer）是指接收 reducer 作为参数并返回新 reducer 的函数。它类似于"reducer 工厂"，让我们能够创建特定版本的 reducer。

方案一：动态 action 类型

function createCounterWithNamedType(counterName = '') {
  return function counter(state = 0, action) {
    switch (action.type) {
      case `INCREMENT_${counterName}`:
        return state + 1
      case `DECREMENT_${counterName}`:
        return state - 1
      default:
        return state
    }
  }
}

使用方式：

const rootReducer = combineReducers({
  counterA: createCounterWithNamedType('A'),
  counterB: createCounterWithNamedType('B'),
  counterC: createCounterWithNamedType('C')
})

方案二：action 中包含标识信息

function createCounterWithNameData(counterName = '') {
  return function counter(state = 0, action) {
    const { name } = action
    if (name !== counterName) return state

    switch (action.type) {
      case 'INCREMENT':
        return state + 1
      case 'DECREMENT':
        return state - 1
      default:
        return state
    }
  }
}

通用高阶 Reducer 实现

我们可以创建一个更通用的高阶 reducer，它接收原始 reducer 和标识符：

function createNamedWrapperReducer(reducerFunction, reducerName) {
  return (state, action) => {
    const { name } = action
    const isInitializationCall = state === undefined
    if (name !== reducerName && !isInitializationCall) return state
    return reducerFunction(state, action)
  }
}

更进一步，我们可以实现一个过滤型高阶 reducer：

function createFilteredReducer(reducerFunction, reducerPredicate) {
  return (state, action) => {
    const isInitializationCall = state === undefined
    const shouldRunWrappedReducer = 
      reducerPredicate(action) || isInitializationCall
    return shouldRunWrappedReducer ? reducerFunction(state, action) : state
  }
}

集合/项目 Reducer 模式

当我们需要管理多个相似项目的集合时，可以采用这种模式：

function itemReducer(state, action) {
  switch(action.type) {
    case "INCREMENT": return state + 1;
    case "DECREMENT": return state - 1;
    default: return state;
  }
}

function collectionReducer(state = [], action) {
  switch(action.type) {
    case "INCREMENT":
    case "DECREMENT":
      return state.map((item, index) => 
        index === action.index ? itemReducer(item, action) : item
      );
    default:
      return state;
  }
}

对于键值对形式的集合，可以使用类似的模式：

function mapReducer(state = {}, action) {
  switch(action.type) {
    case "INCREMENT":
    case "DECREMENT":
      return {
        ...state,
        [action.key]: itemReducer(state[action.key], action)
      };
    default:
      return state;
  }
}

最佳实践建议

1. 保持 reducer 纯净：所有高阶 reducer 都应该保持 reducer 的纯净特性
2. 明确命名：为不同实例的 reducer 和 action 使用清晰的命名
3. 适度抽象：不要过度抽象，只在确实需要复用时才使用高阶 reducer
4. 文档记录：为自定义的高阶 reducer 编写清晰的文档说明

总结

在 React/Redux 应用中，通过高阶 reducer 模式可以有效地复用 reducer 逻辑，避免代码重复。本文介绍了多种实现方式，从简单的动态 action 类型到通用的过滤型高阶 reducer，以及集合/项目模式。根据实际应用场景选择合适的模式，可以显著提高代码的可维护性和可扩展性。

记住，Redux 的核心原则之一是 reducer 只是纯函数，这为我们创建各种高阶 reducer 组合提供了极大的灵活性。合理利用这些模式，可以让你的 Redux 代码更加简洁高效。

redux 项目地址: https://gitcode.com/gh_mirrors/red/redux