我为什么要在这个例子中使用Redux？

Question

到目前为止，Redux并没有让我的生活更轻松。每次添加一个组件时，我似乎都会不必要地创建三个文件（action，constants，reducer）并且比必要时更难思考。但我相信使用Redux肯定有明显的优势，我对此无视。让我带你进入下面的例子。

预期行为：

用户可以选择多个项目并将其添加到购物车（POST到后端）。

JQuery的

这是我自然而然地诉诸的，但如果我使用普通的jQuery，我觉得我做错了。我应该这样想吗？

$(function() {
  $(".item").click(function(event) {
    $(event.target).toggleClass("selected");
  }

  $("button.submit").click(function() {
    var selectedItems = $(".item.selected");
    var itemIds = $.map(selectedItems, function(item) { return $(item).data("id") });
    $.post(some_url, {itemsToAdd: itemIds});
});

在React中

我会做以下事情：

ItemsContainer
  state: selectedItems
  functions: addItem, removeItem, saveCart

Item
  state: isSelected
  props: addItem, removeItem

在Redux中

我怎样才能更轻松地做到这一点？也许我不应该将selectedItems作为状态存储在ItemsContainer内并存储在globalState中？

Answer 1

我不认为为每个组件创建一个reducer或action是完全必要的。 reducer及其相关操作应更多地基于数据中的主题。

问题可能是这个例子有点太小而无法证明Redux的优势。 Redux旨在解决规模问题。然而，如果这是整个应用程序，我没有看到任何理由为什么jQuery是不够的。人们常常抱怨Redux和类似的Flux实现所涉及的“样板”，但是在你的应用程序变得更加复杂之后，它的真实价值就会显露出来。

要回答你的问题，我会有一个“项目”缩减器和与“项目”及其相互作用相关的任何操作。项状态树将具有类似isSelected的键，它将是唯一标识符的数组。

容器本身应该传递“isSelected”作为道具而不是状态。我尽量避免在组件中有任何内部状态。状态应该在一个完整的循环中不断更新，并作为道具传递到您的容器中。我的容器中有一个mapStateToProps函数可以促进这种设计模式。

我认为这个例子特别影响了我的很多设计模式：http://redux.js.org/docs/advanced/ExampleRedditAPI.html

Answer 2

有一个good explanation from Dan Abramov，其中他解释说您可能不需要Redux。 当然，他确实也列出了您可能要使用Redux的原因。

Dan使用Redux的原因包括：

• 如果您想将状态持久化到本地存储，
• 在不干扰太多业务逻辑的情况下提供替代UI，
• 保留撤消历史记录，而无需对代码的编写方式进行重大更改。

Answer 3

您无法将Redux与jQuery或React等进行比较。 jQuery和React都存在以便于操作DOM。 Redux的存在是为了便于保持＆＃39;状态。在您的应用中。

使用Redux可以获得的好处是，一切都在可预测的标准化工作中发挥作用。办法。什么可以修改你的州有规则。这对我来说是最大的好处。它使得复杂应用程序的代码更简单。它使添加新逻辑变得更简单。它会加快开发时间，因为它是可预测的。

如果您像使用jQuery / pure React一样手动保持组件内的状态，那么在整个应用程序中可能最终会有不同的实现。

如果你从viewlogic中分离你的状态，你也可以获得更容易的测试。如果你使用redux，你会写一些超级简单的减速器来测试。如果您在视图代码中传播了相同的数据操作，那么正确测试它将会非常棘手。

Redux的另一个好处是一切都通过一个点。即调度员将所有数据放在一个地方，即商店。这使得使用中间件扩展应用程序变得非常简单。公平地说，这通常不需要，但有时它可能非常有用。它还可以实现像时间旅行一样的出色工具。在状态分布在整个应用程序中或以不同方式操纵状态的解决方案中，这是不可能的。

因此，对于您想要维护的更大的应用程序来说，处理数据的统一方法是个好主意。