我为什么要在这个例子中使用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

我怎样才能更容易地做到这一点？也许我不应该在globalState selectedItems内部ItemsContainer和内部存储状态？

Answer 1

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

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

要回答你的问题,我会有一个"项目"减速器和与"项目"及其相互作用相关的任何操作.项状态树将具有类似于isSelected唯一标识符数组的键.

容器本身应该传递"isSelected"作为道具而不是状态.我尽量避免在组件中有任何内部状态.状态应该在一个完整的循环中不断更新,并作为道具通过容器传递下去.我会mapStateToProps在我的容器中有一个功能,可以促进这种设计模式.

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