javascript - React 应用程序中的多个待办事项列表（父 -> 子关系）

Question

我在 ReactJS 中发现了一个我认为的严重缺陷。虽然我承认这个缺陷可能是我理解的一个缺陷:) 我正在尝试构建一个简单的 Todo 应用程序（使用 TodoMVC），当你尝试使用 Redux 之类的东西进行状态管理时，你会遇到非常非常棘手的问题尝试处理嵌套 JSON 时，即通常包含与父节点相关的父节点（“projects”>，然后是子节点“todos”）的数据库响应。

Redux 似乎希望您将响应中的数据“标准化”，因此它是不可变的。不要让任何人感到不安，但这似乎是宇宙中最荒谬的事情。因此，我们构建了一个 SPA 应用程序来处理来自我们数据的 json 响应......然后......哦等等，我们必须在客户端上构建一个 ORM 来将所有这些数据转换为不同的格式来处理它。

如果这是 React、Redux 等的状态（抱歉，没有双关语），应该放弃 Javascript 框架。我在 20 分钟内在 Rails 中构建了一些东西。当然它不是 SPA，但是创建这个 MVC 结构很简单……不仅在 React 中看起来非常困难、毛茸茸和过于复杂，当添加 Redux 时，它就进入了荒谬的领域。也许这就是为什么我们只看到包含所有这些工具的非常非常简单的教程......用它们构建大型应用程序是不可能的。

所以基本上，在尝试用 react 和 redux 编写上面这个例子的简单几行代码时，我被引导到这个：

https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape

有人可以证明我错了吗？请。只是一个简单的代码笔，向我展示了您可以拥有一个父“项目”组件，您可以将“待办事项”添加为子组件，并能够制作多个父组件，而无需进入上面的兔子洞。

如果这是真的，我认为这是一个严重的缺陷。一个炫耀。

标签： javascriptreactjsreduxredux-thunkredux-orm

Answer 1

您的问题和理解在某些方面是错误的。

就上下文而言，我是 Redux 维护者，我编写了您链接到的 Redux “Normalizing State Shape”文档页面。

首先，如果您使用 React ，则不需要使用 Redux。事实上，我们建议大多数初学者应该首先专注于学习 React，并且只有在熟悉 React 后才尝试学习 Redux。

其次，Redux 独立于 React，尽管它们通常一起使用。您可以单独使用 Redux，也可以与任何 UI 框架（React、Angular、Vue、Ember、jQuery、vanilla JS 等）一起使用。

第三，规范化是推荐的模式，但不是必需的。根据您链接的文档页面，规范化数据有几个好处，但如果这对您的应用程序更有效，那么保持数据嵌套是可以的。

第四，有许多使用 React 和 Redux 编写的大型复杂应用程序，而不仅仅是 todo 示例。请参阅我的Redux 插件目录中的应用程序和示例列表。

React 文档和 Redux 文档都有指向许多 CodePen / CodeSandbox 示例的链接，这些示例演示了如何使用它们 - 请参阅React 文档中的主要概念和教程页面，以及 Redux 文档中的示例页面。

此外，TodoMVC.com 网站有几个 React 待办事项列表示例，您可以查看。

我建议您花时间阅读 React 文档中的教程。您可能对我建议的学习 React和学习 Redux的资源以及我的React/Redux 链接列表中列出的文章和资源感兴趣。