redux - combineReducers 可以处理额外的 Action 吗？

Question

我想要的是根 reducer 结合其他 reducer ，并听取额外的 Action 。我找到了文档，但我无法获得任何信息。

这是一些伪代码。

const root1 = combineReducers({
  reducer1,
  reducer2,
  reducer3,
  reducer4
});

function root2(state = initState, action) {
  switch (action.type) {
    case LOAD_DATA:
      return _.assign({}, initState, action.data);
    default:
      return state;
  }
}

merge(root1, root2);

我想出的唯一方法是删除 combineReducers:

function root(state = initState, action) {
  switch (action.type) {
    case LOAD_DATA:
      return _.assign({}, initState, action.data);
    case ...: return ...;
    case ...: return ...;
    case ...: return ...;
    default: return state;  
  }
}

有没有另一种方法来实现这一点？

Answer 1

是 ，您可以使用 combineReducers()使用多个 reducer ，同时还具有重建整个应用程序状态的操作。诚然，这是一个有点奇怪的设计决策，并且不能很好地扩展到更复杂的应用程序，但您显然有一个用例。如果你想做这样的事情，你有两个选择。
选项 1:拆分行动
在多个 reducer 函数中监听相同的 action 类型是完全有效的。这是最直接的方法，尽管它涉及更多的重复。您只需将您的操作返回的每个状态分解为它适用的各个 reducer 函数。
例如，如果这是您的整个应用程序状态

{
    foo: {},
    bar: {}
}

您重建整个应用程序状态的操作类型是 LOAD_DATA ，你可以这样做

function foo (state = {}, action) {
    switch (action.type) {
        case 'LOAD_DATA':
            return {...state, action.result.foo}
    }
}

function bar (state = {}, action) {
    switch (action.type) {
        case 'LOAD_DATA':
            return {...state, action.result.bar}
    }
}

const root = combineReducers({
  foo,
  bar
});

这样，两个 foo和 bar在您的状态下，总是会使用来自同一操作的相应数据进行重建。
选项 2:构建自定义 combineReducers()
没有什么能阻止您构建自己的 combineReducers() 版本.如果你看 this video关于 build combineReducers()从头开始执行函数，您会发现其中的逻辑并没有那么复杂。您只需要监听特定的操作类型，如果匹配，则从该操作返回整个状态。这是我通过查看 current source for combineReducers() 构建的版本然后将 2 个 util 函数用于该函数

function combineReducers(reducers) {
  var fn = (val) => typeof val === 'function';
  var finalReducers = Object.keys(reducers).reduce((result, key) => {
    if (fn(reducers[key])) {
      result[key] = reducers[key]
    }
    return result
  }, {});

  return function combination(state = {}, action) {
    if (action.type === 'LOAD_DATA') {
        return completeStateReducer(action)
    } else {
        var hasChanged = false
        var fn = (reducer, key) => {
          var previousStateForKey = state[key]
          var nextStateForKey = reducer(previousStateForKey, action)
          if (typeof nextStateForKey === 'undefined') {
            var errorMessage = getUndefinedStateErrorMessage(key, action)
            throw new Error(errorMessage)
          }
          hasChanged = hasChanged || nextStateForKey !== previousStateForKey
          return nextStateForKey
        }
        var finalState = Object.keys(finalReducers).reduce((result, key) => {
            result[key] = fn(finalReducers[key], key)
            return result
          }, {})

        return hasChanged ? finalState : state
    }
  }
}

function completeStateReducer(action) {
    return action.result;
}

除了重新合并那些 util 函数之外，我真正添加的唯一内容是关于监听 LOAD_DATA 的一点。操作类型，然后调用 completeStateReducer()当发生这种情况而不是组合其他 reducer 功能时。当然，这假设您的 LOAD_DATA action 实际上会返回您的整个状态，但即使没有，这也应该为您指明构建自己的解决方案的正确方向。