React redux 应用程序文件夹结构答案

【问题标题】：React redux application folder structure [closed]React redux 应用程序文件夹结构
【发布时间】：2018-03-21 19:55:14
【问题描述】：

我了解 react/redux 应用程序的概念。

我的问题是，有没有一种首选的方式来布局文件夹结构和文件。

在对 repos 进行大量在线研究后，似乎每个人的做法都略有不同，具体取决于他们的代码风格。

另一方面，Angular 似乎有一个固定的结构。

这就是让 react 更强大的原因吗？因为您可以根据需求的变化进行调整和调整？

社区是否就任何固定模式达成一致？

【问题讨论】：

“每个人的做法都略有不同”我认为这就是您的答案。 :)

标签： javascript reactjs redux

【解决方案1】：

正如你自己所说的那样； '每个人的做法略有不同'。提供一些资源对吗？

我不知道您目前对 React 有多少经验。我个人从使用dumb / smart component pattern 的传统结构开始，我在其中创建了一个src/redux 文件夹。在其中，我有一个 actions + reducers 文件夹。这适用于较小的应用程序。

在了解了 Redux Ducks pattern 之后，我改变了这种方法，它删除了很多样板文件和复制粘贴 reducer。

我目前正在使用this structure。

我的建议是尝试不同的方法，看看哪种方法最有效。这取决于您和您的同事的一般工作方式。例如 - 如果您知道每个人都使用他们的 CMD+P 来搜索特定文件，那么您希望文件名更明确，而不是使用 actions/posts.js 和 reducers/posts.js 文件，您希望创建 postsActions.js和 postReducers.js 代替。我建议您也阅读这两个 Medium 帖子，作为灵感：

7 月 31 日 18 日编辑： 看到很多人仍然阅读此评论并对其进行投票。我想建议，如果你开始从事大中型项目，我肯定会尝试了解一些关于 TypeScript 和 React 的知识。我已经完全迁移到 TypeScript，因为由于类型、接口、泛型和更严格，它使一段时间后回到项目变得更容易。它对您对项目的概述有很大帮助。它的几个缺点是你必须学习 React 库的类型以及如何使用它。 TypeSearch 非常有助于查看是否有可用于特定库的类型。此外，一些模式（如高阶组件）在 TypeScript 中可能会因为一开始的类型而变得笨拙。

【讨论】：

我对这个问题投了反对票，认为正如它所说的everyone does it slightly differently。但是你的回答改变了我的想法。谢谢:)
鸭子图案很棒。它让我们的目录结构大致反映了状态对象是如何嵌套的。并且通常您处理负责同一状态部分的 reducer 和操作，因此按主题对它们进行分组而不是它们是什么类型的模块是有意义的。例如，从来没有理解将所有减速器放在一个文件夹中的好处。当然这是某种结构，但根本没有真正的帮助。
我已经使用 React 几年了，我一直在努力解决的是中型到大型应用程序的应用程序结构。我现在找到了一种非常令人满意的工作方式。我开始使用 TypeScript，以便更好地了解我正在使用的数据。我在我的 redux-store 中更多地使用选择器，所以我不必在我的组件中这样做（而且它是可重用的）——我为此使用了“重新选择”。另一件对我帮助很大的事情是更多地使用“redux-saga”——这对于异步后台任务特别有用。
@Alserda 非常感谢您的积极回答。我真的很感谢你的帮助。非常感谢