React redux应用程序文件夹结构

Hel*_*rld 18 javascript reactjs redux

我理解react/redux应用程序的概念.

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

在对repos在线做了大量研究之后,似乎每个人都会根据代码的味道略有不同.

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

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

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

Als*_*rda 20

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

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

在了解了Redux Ducks模式后,我改变了这种方法,该模式删除了大量的样板和复制粘贴缩减器.

我目前正在使用这种结构.

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

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

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

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