Как я могу избежать дублирования бизнес-логики в моих редукторах Redux?

Question

Допустим, у меня есть приложение, которое отображает проблемы для данного проекта.Пользователь может открыть проблему, что означает, что он может увидеть ее на экране, или закрыть проблему, то есть она исчезнет.Когда я закрываю проект, я также хочу скрыть проблему, видимую для пользователя.

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

Идея первая: Просто повторите код.Я копирую код CLOSE_PROJECT в любой метод, который нуждается в этом, например CLOSE_ISSUE.

const reducer = (state, action) => {
  switch (action.type) {
    case OPEN_PROJECT:
      state.project = action.payload.project
    case CLOSE_PROJECT:
      state.project = null
      state.issue = null
    case CLOSE_ISSUE:
      state.issue = null
  }
}

Идея вторая: Перемещение повторно используемого кода в вспомогательные функции.Передайте состояние в вспомогательную функцию, верните новое состояние.(Примечание: я использую immer.js, но просто представьте, что это псевдо-код, который фактически не изменяет состояние) *

const closeProject = (state, action) => {
  state.project = null
  state
}

const closeIssue = (state, action) => {
  state.project = null
  state
}

const reducer = (state, action) => {
  switch (action.type) {
    case OPEN_PROJECT:
      state.project = action.payload.project
    case CLOSE_PROJECT:
      state = closeProject(state)
      state = closeIssue(state)
    case CLOSE_ISSUE:
      state.issue = null
  }
}

Идея третья: Обработка логики внередуктор.Имеют вспомогательные функции, которые координируют множественные вызовы диспетчеризации.

const closeProject = (dispatch) {
  dispatch(closeProjectAction())
  dispatch(closeIssueAction())
}


const ReactThing = (dispatch) => {
  const handleCloseProjectClick = () => {
    closeProject(dispatcher)
  }

  return (
    <div onClick={ e => handleCloseProjectClick() }>Close</div>
  )
}

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

Answer 1

Все три варианта полностью действительны.В некоторой степени это вопрос о том, как вы хотите смоделировать свою логику и как вы хотите абстрагировать общую функциональность.

Есть пара разделов документации Redux, которые в основном касаются ваших вопросов:

• Redux FAQ: где должна жить моя «бизнес-логика»?
• Структурирование редукторов: повторное использование логики редуктора

IТакже обсуждались некоторые аспекты, связанные с этим, в моем посте Дао Redux, Часть 2: Практика и философия .

Также, в качестве дополнительного примечания: я настоятельно рекомендую использовать наш ReduxСтартовый комплект , который использует Immer для упрощенной настройки редуктора.