reactjs - 为什么我应该在这个例子中使用 Redux？

Question

关闭。这个问题是 opinion-based 。目前不接受答案。

---

想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 .

已关闭 4 年前。

Improve this 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 实现涉及的“样板文件”，但当您的应用变得更加复杂时，它的真正值(value)就会显现出来。

为了回答您的问题，我将有一个“Items”缩减器和与“Items”及其交互相关的任何操作。项目状态树将有一个像 isSelected 这样的键，它是一个唯一标识符的数组。

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

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