React应用程序中有多个待办事项列表(父级->子级关系)

时间:2018-06-28 15:50:52

标签: javascript reactjs redux redux-thunk redux-orm

我在ReactJS中发现了一个严重的缺陷。尽管我承认该缺陷可能是我理解上的缺陷:)我试图构建一个简单的Todo应用程序(使用TodoMVC),并且当您尝试使用Redux之类的东西进行状态管理时,您遇到了非常非常棘手的问题尝试处理嵌套JSON时,即数据库响应通常将包括与父级相关的父级节点(“ projects”,然后是子节点“ todos”)。

Redux似乎希望您对响应中的数据进行“标准化”,以使其不受干扰。不要让任何人感到不安,但这似乎是宇宙中最荒谬的事情。因此,我们构建了一个SPA应用程序来处理来自数据的json响应。...然后……哦,等等,我们必须在客户端上构建ORM,以将所有数据整理成另一种格式以进行处理。

如果这是React,Redux等的状态(对不起,请不要双关语),则应该放弃Javascript框架。我花了大约20分钟的时间在Rails中构建了一些东西。当然,它不是SPA,但是创建这种MVC结构很简单……在React中,添加Redux似乎不仅极其困难,繁琐且过于复杂,当添加Redux时,它陷入了荒谬的领域。也许这就是为什么我们只看到使用所有这些工具的非常简单的教程的原因。...无法使用它们来构建大型应用程序。

因此,基本上,在尝试使用react和redux编写上述示例中的简单几行代码时,我就得到了:

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

有人可以证明我错了吗?请。只是一个简单的Codepen,向我展示了您可以有一个父级“项目”组件,您可以将其作为子项添加到“待办事项”中,并可以创建多个父项组件,并且可以使多个子项不落入上面的兔子洞。

如果这是真的,我认为这是一个严重的缺陷。一道好戏。

1 个答案:

答案 0 :(得分:0)

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

对于上下文,我是Redux维护者,我编写了链接到的Redux“规范化状态形状”文档页面。

首先,如果您正在使用React,则不需要 使用Redux。实际上,我们建议大多数初学者应首先专注于学习React,并且只有在对React感到满意之后才尝试学习Redux。

第二,Redux独立于React,尽管它们通常一起使用。您可以单独使用Redux,也可以将其与任何UI框架(React,Angular,Vue,Ember,jQuery,vanilla JS等)一起使用。

第三,规范化是一种推荐模式,但这不是必需的。在您链接的文档页面上,规范化数据有很多好处,但是如果对您的应用程序更好,则可以嵌套数据。

第四,有许多 大型复杂应用程序是用React和Redux编写的,而不仅仅是待办事项示例。请参阅我的Redux addons catalog中的“应用和示例”列表。

React文档和Redux文档都具有指向许多CodePen / CodeSandbox示例的链接,这些示例演示了如何使用它们-请参见React文档中的Main ConceptsTutorial页,以及{{3} }页面。

此外,您可以在TodoMVC.com网站上找到Examples

我建议您花些时间阅读React文档中的教程。您可能对我对several React todo list exampleslearning React的建议资源以及在learning Redux中列出的文章和资源感兴趣。