Есть ли стандартный способ маршрутизации действия setState приставки?

Question

Я хочу создать общее действие setState во многих редукторах реактивного-избыточного кода, чтобы я мог использовать один и тот же синтаксис для отправки обновлений состояния локально и в области избыточности.Я бы назвал this.setState для локальных обновлений и this.props.setState для обновлений редукций.

Корпус редуктора выглядит следующим образом:

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

Это прекрасно работает для одного редуктора, но если у меня много редукторов через combineReducers, он отправляет действие setState всемих.Это не то поведение, которое я хочу.Мне нужно направить действие setState на редуктор, для которого оно предназначено.Мне интересно, есть ли у рекомендуемого-редукса стандартный рекомендуемый способ сделать это, или это выходит за пределы их встроенной функциональности?

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

Оформление заказа Повторное использование логики редуктора для получения более подробной информации и примеров.