Какой смысл действий и редукторов в Redux?

Question

Я уже некоторое время использую Redux, но до сих пор не вижу смысла действий и редукторов.

Как описано в документах , редуктор можно суммировать как (previousState, action) => newState. Тот же принцип применим к React useReducer.

Так что эта функция-редуктор в основном обрабатывает все действия, что выглядит как нарушение принципа единой ответственности. Я уверен, что есть веская причина сделать это таким образом, но я этого не вижу.

Для меня было бы больше смысла просто иметь функцию для каждого действия. Таким образом, вместо действия ADD_TODO у вас будет функция addTodo(previousState, todoText) => newState. Это уменьшит (без каламбура) много стандартного кода и может даже дать небольшое улучшение производительности, так как вам больше не нужно switch через типы действий.

Так что мой вопрос: В чем преимущество наличия редуктора по сравнению с функцией одиночного действия?

Answer 1

Итак, если ваш вопрос заключается в том, почему мы вообще используем reducers?

Настоящий шаблон Flux является концептуальным: необходимость выпустить обновление, необходимость зарегистрировать Магазин в Диспетчер, необходимость того, чтобы Магазин был объектом (и сложности, которые возникают, когда вам нужно универсальное приложение).

Это фундаментальный выбор дизайна, который redux сделал, вдохновленный flux.

Если вам не нравятся switch корпуса, а там по размеру редуктора. Ниже вы можете получить что-то вроде этого:

export const todos = createReducer([], {
  [ActionTypes.ADD_TODO]: (state, action) => {
    const text = action.text.trim()
    return [...state, text]
  }
})

Выше приведена функция, которая позволяет нам express редукторам в качестве отображения объектов из типов действий в обработчики.

createReducer может быть определено as:

function createReducer(initialState, handlers) {
  return function reducer(state = initialState, action) {
    if (handlers.hasOwnProperty(action.type)) {
      return handlers[action.type](state, action)
    } else {
      return state
    }
  }
} 

Подробнее об этом можно прочитать здесь

Answer 2

Я думаю, вы не цените гибкость редукторов, вы можете создать столько, сколько захотите:

const initialState = {
    key: 'someValue',
    key2: 'someValue',
    key3: {
        key31: 'someValue',
        key32: 'someValue',
        key33: []
    }
}

// all the below reducers can live in separate files and only handle a single action, if they want, no switches involved at all
const key = (state = initialState.key, action) => { /* the logic to be performed at 'key' */ }
const key2 = (state = initialState.key, action) => { /* the logic to be performed at 'key2' */ }

const key31 = (state = initialState.key3.key31, action) => { /* the logic to be performed at 'key3.key31' */ }
const key32 = (state = initialState.key3.key32, action) => { /* the logic to be performed at 'key3.key32' */ }
const key33 = (state = initialState.key3.key33, action) => { /* the logic to be performed at 'key3.key33' */ }
const key3 = combineReducers({key31,key32,key33})

// this is the top level reducer for your store
const myTopLevelReducer = combineReducers({key,key2,key3});