javascript - 如何构建 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

在官方的例子中我们有几个顶级目录:

• 组件 “dumb” React 组件不知道 Redux；
• 容器，用于连接到 Redux 的“智能”React 组件；
• actions 所有 Action 创建者，其中文件名对应于应用程序的一部分；
• reducers 所有reducer，其中文件名对应state key；
• store 用于存储初始化。

这适用于中小型应用。

当您想要更加模块化并将相关功能组合在一起时，Ducks或 other ways of grouping functionality by domain是构建 Redux 模块的一种很好的替代方法。

最终选择最适合您的结构。 Redux 作者不可能比您更了解什么对您来说更方便。