Многие приложения имеют повторяющиеся функции для разных редьюсеров с небольшими изменениями. Например, многие формы, которые имеют режимы просмотра и редактирования.

Одним из подходов было бы дублирование кода редуктора:

function userFormReducer(state, action) {
  switch (action.type) {
    case SET_USER_VIEW_MODE:
      return { ...state, viewMode: action.payload.viewMode };
    ...
  }
}
function jobFormReducer(state, action) {
  switch (action.type) {
    case SET_JOB_VIEW_MODE:
      return { ...state, viewMode: action.payload.viewMode };
    ...
  }
}
function companyFormReducer(state, action) { etc...}

лучшим подходом было бы делегировать работу выделенному редьюсеру, который сохраняет viewMode для каждой формы:

function formReducer(state, action) {
  switch (action.type) {
    case SET_VIEW_MODE:
      return {
        ...state,
        [action.payload.formName]: {
           viewMode: action.payload.viewMode
        }
      };
    ...
  }
}

Также есть несколько других вариантов:

  • Используйте редуктор более высокого порядка для аналогичной функциональности редуктора;
  • Используйте промежуточное ПО, если ваш вариант использования оправдывает это. Например, если вы повторяете аналогичный код для многих типов действий.

Держите его СУХИМ (не повторяйтесь). Потраченное время на размышления о том, как повторно использовать код, почти всегда оказывается эффективным в долгосрочной перспективе. Не ленитесь, это того стоит!

Все статьи из этой серии:

https://medium.com/@adamklein_66511/redux-bad-practices-1-lists-as-arrays-9115ba87b0ce

https://medium.com/@adamklein_66511/redux-bad-practices-2-duplicate-code-9f2f3d774d4d

https://medium.com/@adamklein_66511/redux-bad-practices-3-nested-state-6eebf1a410df

https://medium.com/@adamklein_66511/redux-bad-practices-5-duplicate-state-996d259758e3

https://medium.com/@adamklein_66511/redux-bad-practices-6-new-objects-on-the-fly-c38b503948a5

https://medium.com/@adamklein_66511/redux-bad-practices-7-mix-ui-state-with-model-data-cdca6c8d8fd9

Первоначально опубликовано на 500tech.com.