React redux应用程序文件夹结构

时间:2018-03-21 19:55:14

标签: javascript reactjs redux

我理解react / redux app的概念。

我的问题是,是否有一种首选的方法来布局文件夹结构和文件。

在对repos在线进行大量研究之后,似乎每个人都会根据代码风格略有不同。

另一方面,Angular表明存在一组结构。

这是什么使得反应变得更强大,因为您可以随着需求的变化进行调整和调整?

社区是否同意任何固定模式?

1 个答案:

答案 0 :(得分:14)

我不知道为什么这篇文章遭到如此多的关注,这是一个很好的问题 - 但正如你自己所说; “每个人的表现都略有不同”。它可以帮助提供一些资源吗?

我不知道你目前对React有多少经验。我个人开始使用传统结构,使用dumb / smart component pattern,我在其中创建了一个src/redux文件夹。在那之内我有一个动作+ Redurs文件夹。这适用于较小的应用程序。

在了解了Redux Ducks pattern后,我改变了这种方法,删除了大量的样板文件和复制粘贴缩减器。

我目前正在使用this structure

我的建议是尝试不同的方法,看看什么效果最好。这取决于您和您的同事一般的工作方式。例如 - 如果您知道每个人都使用他们的CMD + P来搜索特定文件,那么您希望在文件名中更明确,而不是使用您更喜欢的actions/posts.jsreducers/posts.js文件改为创建postsActions.js和postsReducers.js。我建议你阅读这两篇中篇文章作为灵感:

如果您需要任何帮助/更多来源可以向您学习,请随时与我联系。我希望这会对你有所帮助。

7月31日编辑: 看到很多人仍然阅读这篇评论并赞成它。我想建议,如果你开始从事大中型项目,我肯定会尝试获得有关TypeScript和React的一些知识。我已经完全迁移到TypeScript,因为由于打字,界面,泛型而且它更加严格,因此在一段时间后重新进入项目变得更加容易。它对您的项目概述非常有帮助。它的一些缺点是你必须学习React库的类型以及如何使用它。 TypeSearch极大地帮助查看特定库是否有可用的类型。由于首先是打字,因此一些模式(如高阶组件)在TypeScript中可能会很笨拙。