Question

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

Reducer情况如下：

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

这对一个减速器效果很好，但是如果我通过combineReducers有许多减速器，它将向所有的减速器发送setState动作。那不是我想要的行为。我需要将setState操作路由到原本打算使用的reducer。我想知道react-redux是否具有推荐的标准方法来执行此操作，或者这是否超出其内置功能？

Answer 1

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

例如，假设您的减速器逻辑如下：

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

您可以通过创建高阶减速器在多个切片减速器中重用它：

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，了解更多详细信息和示例。

有没有路由setState redux操作的标准方法？

1 个答案: