是否有路由 setState redux 操作的标准方法？答案

【问题标题】：Is there a standard way to route a setState redux action?是否有路由 setState redux 操作的标准方法？
【发布时间】：2019-02-26 20:16:57
【问题描述】：

我想在许多 react-redux reducer 中创建一个通用的 setState 操作，以便我可以使用相同的语法在本地和 redux 范围内调度状态更新。我会致电 this.setState 进行本地更新，并致电 this.props.setState 进行 redux 更新。

reducer 案例如下所示：

case "SET_STATE": 
   return {...state, ...action.payload}

这对一个减速器很有效，但是如果我通过combineReducers 有多个减速器，它会将setState 操作发送给所有减速器。这不是我想要的行为。我需要将我的 setState 操作路由到它打算用于的减速器。我想知道 react-redux 是否有标准的推荐方式来执行此操作，或者这是否超出了它们的内置功能？

【问题讨论】：

你看过HOC reducer模式吗？
你应该一次只在一个地方拥有你的状态，redux 在组件卸载时保持它并在整个应用程序中访问它，并且，反应状态 仅与该特定组件相关的状态。如果您的状态重复，那么您也很难保持同步，并且会导致错误
@victor.ja 我没有复制我的状态。
@abadalyan 这正是我想要的，谢谢！

标签： javascript reactjs redux react-redux

【解决方案1】：

如果您需要在多个 reducer 中重用相同的逻辑，您可能会发现高阶 reducer 模式很有帮助。

例如，假设您的 reducer 逻辑如下所示：

function setState(state, action) {
   switch(action.type) {
      case "SET_STATE": 
         return {...state, ...action.payload}
      default:
         return state
   }
}

您可以通过创建高阶 reducer 在多个 slice 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)
  }
}

用它来创建切片缩减器并将它们与combineReducers结合起来：

const rootReducer = combineReducers({
  setStateA: createNamedWrapperReducer(counter, 'A'),
  setStateB: createNamedWrapperReducer(counter, 'B'),
  setStateC: createNamedWrapperReducer(counter, 'C')
})

动作创建者可能如下所示：

setStateAction(name, payload) {
   return {
      type: "SET_STATE",
      name,
      payload
   }
}

结帐Reusing Reducer Logic 了解更多详情和示例。

【讨论】：