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

Question

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

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

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

如果这是真的，我认为这是一个严重的缺陷。一个展示者。

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 addons catalog 中的应用程序和示例列表。

React 文档和 Redux 文档都有指向许多 CodePen / CodeSandbox 示例的链接，这些示例演示了如何使用它们 - 请参阅 React 文档中的 Main Concepts 和 Tutorial 页面，以及 Redux 文档中的 Examples 页面.

此外，TodoMVC.com 网站有several React todo list examples，您可以查看。

我建议您花时间阅读 React 文档中的教程。您可能对我为learning React 和learning Redux 推荐的资源以及我在React/Redux links list 中列出的文章和资源感兴趣。