Question

我有一家形状像这样的商店：

{
  // ...data

  user: {
    warranties: {
      W_1: ['O_1', 'O_2'],
      W_2: ['O_3', 'O_4']   
    }
  }
}

其中以W_开头的密钥是保证，而以O_开头的密钥是可选。

对于每个保修，我都有一个或多个与之相关的选项，user.warranties中的关系形式为：warranty => [options]。

要实现它，我将减速器组合如下：

rootReducer = combineReducers({
  // ...other main reducers

  user: combineReducers({
    // ...other user reducers
    warranties
  })
})

现在，“ 问题”是USER_WARRANTY和USER_OPTION动作都由相同的reducer处理，因为：

添加选件时，需要将其推入正确的保修条目。
相反，当我添加保修时，需要使用默认选项填充它。
最终，它们对相同的数据片进行操作

因此warranties减速器必须对这两个动作做出反应，如下所示：

export default function warranties(state = {}, action) {
  switch (action.type) {
    case USER_WARRANTIES_ADD:
    // add warranty key to `user.warranties`

    case USER_WARRANTIES_REMOVE:
    // remove warranty key from `user.warranties`

    case USER_OPTIONS_ADD:
    // push option to `user.warranties[warrantyID]`

    case USER_OPTIONS_REMOVE:
    // remove option from `user.warranties[warrantyID]`

    default:
      return state
  }
}

我想将它分成两个化简器warranties和options，但仍然让它们对同一数据片进行操作。

理想情况下，我将像这样组成我的根减少器：

rootReducer = combineReducers({
  // ...other main reducers

  user: combineReducers({
    // ...other user reducers
    warranties: magicalCombine({
      warranties,
      options
    })
  })
})

magicalCombine是我难以找到的函数。

我已经尝试过reduce-reducers，但是似乎从未真正达到第二个减速器（options），而且我不确定，因为我不是在尝试达到平坦状态，而是实际上是在同一键上操作。

Answer 1

reducer是一个简单的函数，它接受state和action并返回一个新的状态对象，所以我认为这可以满足您的要求。

rootReducer = combineReducers({
  // ...other main reducers

  user: combineReducers({
    // ...other user reducers
    warranties: (state, action) => {
      // state is state.user.warranties
      // we pass it to each reducer in turn and return the result
      state = warranties(state, action);
      return options(state, action);
    }
  })
})

使用reduceReducers应该做同样的事情（我以前没有使用过，但这就是它的样子。）

rootReducer = combineReducers({
  // ...other main reducers

  user: combineReducers({
    // ...other user reducers
    warranties: reduceReducers(warranties, options)
  })
})

只是有意地限制了redux中的

combineReducers仅传递与提供给它的reducers对象中的键匹配的state属性的值，这在任何其他方面都不是很特别。在这里查看更多。.https://redux.js.org/recipes/structuringreducers/beyondcombinereducers

在Redux中对相同数据片进行拆分的reducer

1 个答案: