如何构建Redux组件/容器

Question

我正在使用redux而且我不确定如何组织我的组件,我认为最好将它们保存在文件夹中,主要组件的名称作为文件夹的名称和内部的所有内部组件:

components
  Common/   things like links, header titles, etc
  Form/     buttons, inputs, etc
  Player/   all small components forming the player
    index.js  this one is the top layout component
    playBtn.js
    artistName.js
    songName.js
  Episode/  another component

然后,在容器文件夹中,我每页只有一个容器,这是我实际连接到Redux的唯一容器:

containers/
  HomePageApp.js
  EpisodePageApp.js
  ...

然后每个顶部组件的操作是一个,而不是每页一个,所以在我连接到Redux的页面容器中,我传递了该页面中使用的组件的所有操作.例如:

actions/
  Player.js
  Episode.js
  ...

我这样做了吗？我没有找到关于谷歌搜索的很多信息,我发现我认为它们仅限于小项目.

谢谢!

Answer 1

在官方示例中,我们有几个顶级目录:

• components对于"哑" React组件不知道Redux;
• containers 用于连接到Redux的"智能"React组件;
• actions 适用于所有动作创建者,其中文件名对应于应用程序的一部分;
• reducers 对于所有reducer,其中文件名对应于state键;
• store 用于商店初始化.

这适用于中小型应用程序.

当您想要将更多模块化和组相关的功能集合在一起时,Duck或其他按域分组功能的方法是构建Redux模块的一种不错的替代方法.

最终选择最适合您的结构.Redux的作者无法比你更了解什么对你更方便.

Answer 2

这是一个关于最佳实践/代码风格的问题,并没有明确的答案.然而,在React redux样板项目中提出了一种非常简洁的风格.它与你现在的非常相似.

./react-redux-universal-hot-example
??? bin
??? src
?   ??? components // eg. import { InfoBar } from '../components'
?   ?   ??? CounterButton
?   ?   ??? GithubButton
?   ?   ??? InfoBar
?   ?   ??? MiniInfoBar
?   ?   ??? SurveyForm
?   ?   ??? WidgetForm
?   ?   ??? __tests__
?   ??? containers // more descriptive, used in official docs/examples...
?   ?   ??? About
?   ?   ??? App
?   ?   ??? Home
?   ?   ??? Login
?   ?   ??? LoginSuccess
?   ?   ??? NotFound
?   ?   ??? RequireLogin
?   ?   ??? Survey
?   ?   ??? Widgets
?   ?   ??? __tests__
?   ?       ??? routes.js // routes defined in root
?   ??? redux
?   ?   ??? init.js
?   ?   ??? middleware
?   ?   ?   ??? clientMiddleware.js  // etc
?   ?   ??? modules // (action/creator/reducer/selector bundles)
?   ?       ??? auth.js
?   ?       ??? counter.js
?   ?       ??? reducer.js  
?   ?       ??? info.js
?   ?       ??? widgets.js
?   ??? server
?   ?   ??? middleware
?   ?   ??? actions // proxy to separate REST api...
?   ??? utils
?   ?   ??? validationUtility.js // utility only (component-level definitions inside respective dir)
?       ??? createDevToolsWindow.js  // etc
??? static
?   ??? dist
?   ??? images
??? webpack