Redux项目中如何优雅地复用Reducer逻辑-优快云博客

Redux项目中如何优雅地复用Reducer逻辑

redux reduxjs/redux: Redux 是一个用于 JavaScript 的状态管理库，可以用于构建复杂的前端应用程序，支持多种状态管理和数据流模式，如 Flux，MVC，MVVM 等。项目地址: https://gitcode.com/gh_mirrors/re/redux

前言

在Redux应用中，随着项目规模的增长，我们经常会遇到需要在不同地方处理相似数据逻辑的情况。这时候，如何优雅地复用Reducer逻辑就成为一个值得深入探讨的话题。本文将详细介绍在Redux项目中复用Reducer逻辑的几种常见模式，帮助开发者构建更清晰、更易维护的状态管理架构。

为什么需要复用Reducer逻辑

在Redux应用中，我们经常会遇到以下场景：

多个组件需要维护相似的数据结构
需要对同一类型的数据进行多处独立管理
需要实现通用的数据处理逻辑（如分页、排序等）

直接复制粘贴Reducer代码虽然能解决问题，但会导致代码冗余和维护困难。因此，我们需要更优雅的解决方案。

基础场景分析

考虑一个计数器应用的例子，我们需要同时维护三个独立的计数器A、B和C：

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
})

这种实现方式存在明显问题：当分发一个INCREMENTaction时，所有计数器都会增加，而这不是我们想要的效果。

高阶Reducer模式

高阶Reducer（Higher-Order Reducer）是指接收Reducer作为参数并返回新Reducer的函数。这个概念类似于高阶组件，是解决Reducer复用问题的核心模式。

1. 基于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')
})

2. 基于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
    }
  }
}

3. 通用高阶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

对于更复杂的场景，我们可以实现一个通用的过滤型高阶Reducer：

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

使用示例：

const rootReducer = combineReducers({
  counterA: createFilteredReducer(counter, action => action.type.endsWith('_A')),
  counterB: createFilteredReducer(counter, action => action.name === 'B'),
  counterC: createFilteredReducer(counter, action => action.type === 'INCREMENT')
})

集合/项Reducer模式

当需要管理一组相似项的状态时，可以采用集合/项模式：

数组形式实现

function countersArrayReducer(state, action) {
  switch(action.type) {
    case "INCREMENT":
    case "DECREMENT":
      return state.map((counter, index) => {
        if(index !== action.index) return counter
        return counterReducer(counter, action)
      })
    default:
      return state
  }
}

对象形式实现

function countersMapReducer(state, action) {
  switch(action.type) {
    case "INCREMENT":
    case "DECREMENT":
      return {
        ...state,
        [action.name]: counterReducer(state[action.name], action)
      }
    default:
      return state
  }
}