javascript - Redux 模式 'set' 操作与 'add'/'remove' 操作

Question

我目前正在使用 redux 创建一个应用程序。我有一个关于我们行动结构的问题。我将把它提炼成下面的一个基本示例。我们使用不可变的 JS，并且我们的存储是由不可变的对象构造的。

我们有一个输入元素，当用户单击数组中的项目时，它会添加或删除到商店。有两种基本的组织方式。为简单起见，我们假设商店由单个名称映射组成，例如“names = Map()”，其中映射如下所示:

{名称1:真实名称2:真实}

策略 1

使用单个操作:SET_SELECTED_NAMES

策略2

使用两个操作:SELECT_NAME、UNSELECT_NAME。

根据我对 redux/react 的理解，以及在我团队的要求下将代码从策略 2 重构为策略 1 后，我从这次重构中感受到了大量的代码味道，但很难清晰地表达出来。感觉好像我们正在将应该从存储中移动的逻辑移动到组件中，以了解“下一个状态”应该是什么。

当用户单击某个项目时，我们需要查看组件内的当前状态，并了解该单击是删除项目还是添加项目。然后我们将新状态直接传递给操作，而不是利用存储/ reducer 来“计算”它。这最终的效果是使化简器变得极其简单并使组件内的逻辑复杂化，或者至少使其不那么冗长。

转向:

正在选择？ this.props.selectName(name) : this.props.unselectName(name)

进入:

this.props.setSelectedNames(this.props.selectedNames.update(name, v => !v));

Answer 1

在 redux 中，您可以在操作创建者和 reducer 中自由添加您的业务逻辑，这实际上取决于您的设置和组织。

我个人更喜欢瘦 reducer 和胖 Action 创建器。

根据我的理解，策略 1 假设有一个胖 Action 创建者，您可以在其中检查一些逻辑，并在经过一些计算后设置一个有效负载供 reducer 处理。

在我看来，这可以很好地工作，并且使 reducer 非常简单，并且只负责更新状态。

感兴趣的文章: http://redux.js.org/docs/faq/CodeStructure.html#structure-business-logic

PS:您还可以考虑一个操作，该操作根据某些逻辑发送调度其他操作，因此使用混合方法(策略 1/2)。

const setLocation = (id:number):ActionType => {
  // check some logic here, and dispatch the right set of actions
  return dispatch => {
        dispatch(getWeather(id))
        dispatch(getForecastDaily(id))
        dispatch(getForecastHourly(id))
      }
    }