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

想法二：将重用的代码移入辅助函数。将该状态传递给helper函数，重新获得新状态。（注意：我使用的是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文档中有几个部分主要解决您的问题：

我还在帖子The Tao of Redux, Part 2: Practice and Philosophy中讨论了与此相关的几个方面。

此外，作为一个补充说明：我强烈建议使用我们的Redux Starter Kit package，该设备内部使用Immer来简化减速器设置。

如何避免在Redux Reducer中重复业务逻辑？

1 个答案: