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

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

预期行为：

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

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

在反应中

我会做如下的事情：

ItemsContainer
  state: selectedItems
  functions: addItem, removeItem, saveCart

Item
  state: isSelected
  props: addItem, removeItem

在Redux中

---

我怎样才能更容易地做到这一点？也许我不应该将

selectedItems

作为状态存储在

ItemsContainer

和globalState中？

我认为没有必要为每个组件创建一个减速机或操作。reducer及其相关操作应该更多地基于数据中的主题

问题可能是示例太小，无法证明Redux的优势。Redux旨在解决规模问题。然而，如果这是整个应用程序，我看不出jQuery有什么理由不能满足需要。人们经常抱怨Redux和类似的Flux实现所涉及的“样板文件”，但它的真正价值是在你的应用程序变得更加复杂之后才显现出来的

为了回答你的问题，我将有一个单一的“项目”缩减器和与“项目”及其交互相关的任何操作。条目状态树将有一个键，如

isSelected

，它是唯一标识符的数组

容器本身应该作为道具而不是状态传递“isSelected”。我尽量避免在组件中出现任何内部状态。状态应该在一个完整的循环中不断更新，并作为道具通过容器传递。我的容器中有一个

mapstatetops

函数，它将促进这种设计模式

---

我认为这个例子特别影响了我的很多设计模式：

你不能将Redux与jQuery或React之类的东西进行比较。jQuery和React都是为了方便操作DOM而存在的。Redux的存在有助于在应用程序中保持“状态”

使用Redux的好处是，一切都以可预测的“标准化”方式工作。关于什么可以修改您的状态，有一些规则。这对我来说是最大的好处。它使复杂应用程序的代码推理变得更简单。它使添加新逻辑变得更简单。它将加快开发时间，因为它是可预测的

如果像使用jQuery/pure-React一样手动将状态保存在组件中，那么在整个应用程序中可能会使用不同的实现

如果您将状态从viewlogic中分离出来，您还可以获得更容易测试的好处。如果您使用redux，您将编写非常易于测试的减缩器。如果在视图代码中有相同的数据操作，那么要正确地测试它是很困难的

Redux的另一个好处是所有内容都通过一个点。也就是将所有数据放在一个地方（存储）的调度器。这使得使用中间件扩展应用程序变得超级简单。公平地说，这通常是不需要的，但有时可能非常有用。它还支持诸如时间旅行之类的伟大工具。这在解决方案中是不可能的，因为状态分布在整个应用程序中，或者状态被以不同的方式操纵

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

他在一篇文章中解释说，您可能不需要Redux。 当然，他也给出了一个清单，列出了您可能希望使用Redux的原因

Dan使用Redux的原因包括：

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

---

在redux中，仅当本地状态具有表示目的时，才需要设置它。若您的州将处理后端逻辑，那个么它必须是全局的，并保存在rootReducer的一个节点中。因此，Redux最终会更有条理，因为你将所有的应用程序框架从表面状态中分离出来。