Question

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

我们有一个输入元素，当用户点击数组中的某个项目时，该元素会添加或删除到商店。有两种基本方法可以组织起来。为简单起见，我们假设商店包含一个名称映射，例如'names = Map（）'，其中地图如下所示：

{ name1：true name2：是的 }

策略1

使用单个操作：SET_SELECTED_NAMES

策略2

使用两项操作：SELECT_NAME，UNSELECT_NAME。

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

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

车削：

正在选择？ this.props.selectName（name）：this.props.unselectName（name）

分为：

this.props.setSelectedNames（this.props.selectedNames.update（name，v =＆gt;！v））;

Answer 1

在redux中，您可以自由地在动作创建者和减少者中添加business logic，这实际上取决于您的设置和组织。

就个人而言，我更喜欢瘦身减肥者和肥胖动作创作者。

策略编号1，根据我的理解，它假定一个胖动作创建者，在那里你检查一些逻辑，并在一些计算后设置一个有效负载供减速器处理。

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

感兴趣的文章： 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))
      }
    }

Redux模式'设置'动作与'添加'/'删除'动作

1 个答案: