javascript - react 终极版 : Confused about where to define certain actions

Question

在 React Redux 项目中:组件 Item 充当组件 Product 和 Category 的容器。 Item 应始终监听点击事件，但根据其包含的内容以不同方式处理事件:如果它包含 Product，则应调度 ADD_TO_CART 和 OPEN(如果它包含 Category)。

我已经有产品和类别的 Action 创建者，它们目前使用 redux-thunk 和 axios 处理异步 API 请求。 OPEN 和 ADD_TO_CART 应该是这些 Action 创建者的一部分，还是该功能属于看板的 Action 创建者？哪个 reducer 应该处理这些 Action ？

Answer 1

这个问题超出了您当前提供的范围，因为您没有提到您的 reducer 的架构，但无论如何，让我们分部分来:

Should the OPEN and ADD_TO_CART be a part of these action creators or does this functionality belong in the board's action creator?

虽然我不完全理解您所说的 board 的 Action 创建者是什么意思，但我相信如果 Action 与单个创建者结合在一起，推理起来要简单得多，例如:

function addToCart(item) {
  return dispatch => dispatch({type: ADD_TO_CART, item})
}

与让不同的创作者分派(dispatch)相同的 Action 相比，您的代码变得更难调试，因为您可能不完全确定哪个创作者分派(dispatch)了哪个 Action ，所以我的建议是:1 个创作者 -> 1 个 Action 。

同时，在将 Action 创建器与您的组件连接时，请尽可能清楚地保持 Action ，这样您就不必在运行时调试代码以查看实际发生的情况，例如:

if(this.props.isItem) {
  this.props.addToCart(this.props.item);
} else {
  this.props.open(this.props.category);
}

代码是不言自明的，可以防止运行时出现奇怪的行为。

And which reducer should handle these actions?

这是一个更棘手的问题，不仅仅是因为我不知道你的 reducer 的当前结构，而且通常选择正确的架构总是很困难，但作为一般准则我会说:

Always split your reducers to sub-domains of your problem

我看到您有一个名为 OPEN 的操作，这让我认为您实际上是在将 reducer 用作 View 模型，但这也取决于实现细节。

在我看来，View Model reducer 非常有用，但应该小心，如果你有 OPEN 操作，这意味着你不仅要存储项目信息，还要存储应用程序 View 的状态在这个 reducer 中，我会将它重命名为 ITEM_OPEN，这样你也可以对其他子域执行 OPEN 操作，同样，如果你正在创建一个 OPEN 操作，您应该存储哪个项目是 open 并且您的 reducer 实际上会在您的应用程序中产生一个新状态。

如果你不想要这个(将应用程序状态存储在 reducer 中作为 View 模型)，我会删除 OPEN 操作，只需通过 react-router 或类似操作来处理它。

因此，根据您提供的有限信息判断，我会说您应该有 2 个 reducer ，一个用于元素，一个用于购物车，ADD_TO_CART 操作显然应该由购物车 reducer 处理， OPEN 应该由 item reducer 处理。