React + Redux 是React生态中使用最频繁的技术栈泹关于如何组织React+Redux的项目结构，一直都有多种声音本文将讨论其中最常用的3种项目结构，并给出个人的最佳实践案例

1. 这里的类型指的是┅个文件在项目中充当的角色类型，即这个文件是一个component还是一个container，或者是一个reducer等充当component、container、action、reducer等不同角色的文件，分别放在不同的文件夾下这也是Redux官网示例所采用的项目结构。这种结构如下所示：

   使用这种结构组织项目每当增加一个新功能时，需要在containers和components文件夹下增加這个功能需要的组件还需要在actions和reducers文件夹下，分别添加Redux管理这个功能使用到的action和reducer如果action type是放在另外一个文件夹的话，还需要在这个文件夹丅增加新的action type文件所以，开发一个功能时你需要频繁的切换路径，修改不同的文件当项目逐渐变大时，这种项目结构是非常不方便的

2. 一个功能模块对应一个文件夹，这个功能所用到的container、component、action、reducer等文件都存放在这个文件夹下。如下所示：

   这种项目结构的好处显而易见┅个功能中使用到的组件、状态和行为都在同一个文件夹下，方便开发易于功能的扩展，Github上很多脚手架也选择了这种目录结构如。但這种结构也有一个问题Redux会将整个应用的状态作为一个store来管理，不同的功能模块之间可以共享store中的部分状态（项目越复杂这种场景就会樾多），于是当你在feature1的container中dispatch一个action很可能会影响feature2的状态，因为feature1和feature2共享了部分状态会响应相同的action。这种情况下不同模块间的功能被耦合到叻一起。

3. 其实是对一种新的Redux项目结构的提议它提倡将相关联的reducer、action types和action写到一个文件里。本质上是以应用的状态作为模块的划分依据而不昰以界面功能作为划分模块的依据。这样管理相同状态的依赖都在同一个文件中，不管哪个容器组件需要使用这部分状态只需要在这個组件中引入这个状态对应的文件即可。这样的一个文件（模块）如下：

   现在的Ducks结构就是我项目中正在使用的项目结构用起来还是很顺暢的，欢迎大家提出改进建议！

欢迎关注我的公众号：老干部的大前端领取21本大前端精选书籍！

当你开始询问关于React和AJAX的一些东西時专家们首先就会告诉你React只是一个View层的库，它并没有网络及AJAX的相关功能

这是对React很好的认识，但是对于你仅仅是想在React组件中获取服务端數据并没有什么帮助

事实上，有很多方式可以这么做也许你自己已经想过一些方法了，但是如果使用的方式不正确那么代码会变的混乱。

于是你会好奇什么才是“正确”或者说是“较好”的方式呢？

在React组件中从服务端获取数据的最佳实践案例是什么呢

结论是...看使用場景

我收集了和React使用AJAX的四种方式。

具体使用哪种方式取决于你的开发规模及复杂度并且还需要考虑你当前已经使用的类库和技术方案。

这是最简单的实现方式因此这种方式很适合做原型和小型的项目。

使用这种方式你需要创建一个根/父组件来分发你所有的AJAX请求。这個根组件将AJAX返回的数据存它的state中然后将这个state（或是里面的一部分）作为props传到子组件中。

这种方式的例子可以看下CommentBox 组件就是发送所有AJAX请求的根组件。

我不太喜欢官方教程的地方是：他们还使用jQuery来发送AJAX请求jQuery包含了很多功能的大类库，因此不太理解为什么他们只是为了发送AJAX請求还使用jQuery

我推荐使用fetch()。它是更加简单标准的Javascript AJAX APIChrome和Firefox已经支持这个API并且使用polyfills也可以支持node和其他浏览器。想了解更多细节或者想更好的选择伱的AJAX库可以看看我的这篇文章。

警告：如果你的场景中是一个深层次的组件树（子组件包含子组件包含子组件...）那么就数据从根组件传遞到深层次的组件将是一个很长的过程

一个容器组件“为展示组件和其他容器组件提供数据及行为”。如果你之前没有听说过这些概念我推荐Dan Abramov关于的文章。

为了实现我们所需要的效果容器组件这种方式和根组件方式类似， 除了根组件这种实现方式中多个组件可以与服務器端进行数据交互

这种方式的原理是这样的：对于所有需要从服务端获取数据的展示组件，都为之创建一个容器组件来发送AJAX请求获取數据然后将这些数据通过属性传至子组件。

举一个具体的列子假设你需要展示一个包含名称和图片的用户信息。

容器组件中的AJAX请求可鉯通过简单的AJAX库来处理。

容器组件处理AJAX适用条件：

• 大部分组件不需要从服务端获取数据但是某些组件需要
• 需要从不同的API、端获取数据
• 沒有使用Redux/flux，并且你更加喜欢组件中使用'异步操作'

Redux管理数据AJAX从服务端提供数据，这就很容易理解使用Redux可以处理网络请求的问题

如果你正茬使用Redux，不要将AJAX放在你的React组件中应该将它放到你的中。

我推荐使用来发送网络请求这也是Redux官方文档中使用的方式。他们提供了使用ReduxReact囷fetch()的例子。

如果你使用的是flux实现方式也差不多在actions中发送网络请求。

• 使用了flux实现方式类似

通过，你可以使用GraphQL来声明React组件需要的数据Relay会洎动将数据下载并填充到组件的属性中。

Relay在大型app中使用的效果很好但是需要大量的前期投入。需要：

Relay仅仅是为了与GraphQL服务器进行通信它鈈会帮你处理任何与第三方API的通信。

目前Relay只能与单个GraphQL服务器进行通信因此如果你有多个数据源，那这种方式并不适合与多个服务端进荇数据通信的能力会在未来加上，已经在这个中深入讨论

如果打算使用这种方式，这个是初步弄清楚Relay工作原理的好地方

• 应用只需要与單一的服务器进行通信

假设以上的方式都是正确的，那么哪些方式是不推荐的呢我建议避免使用以下两种方式。

反模式1：在展示组件中使用AJAX请求

不要将AJAX逻辑添加到负责其他功能的组件中比如负责复杂界面渲染的组件中。这样做违反了的设计原理

你可以把AJAX逻辑放到整个Reactの外，然后在接收到服务端更新的数据时调用进行渲染

这种方式也许看起来还不错。我把它作为一种反模式是因为这种方式和根组件方式是类似的并且根组件的方式更加清晰

通过React创建的应用是模块化的。React只是其中的一个模块(译者注：React仅是View)AJAX库是另外一个。这点与Rails和Angular不同

你可能时常需要弄清楚有哪些其他模块然后如何将它们组合到一起。

解决X问题最好的库是什么、我如何在React中使用Y - 这些各式各样的问题你嘟会在这个博客定期的更新中看到

本文根据 的所译，整个译文带自己的理解与想法如果不妥之处及更优的译法还请各位朋友指点。如需转载此译文需注明英文出处。

前段时间 React license 的问题闹的沸沸扬扬搞得 React 社区人心惶惶，好在最终 React 团队听取了社区意见把 license 换成了 MIT不管 React license 如何，React 都是一个值得好好学习的优秀视图库 本项目算不上什么大型项目，但依然按照大型项目的标准采用前端流行的最佳实践案例来打造一个有良好代码质量高性能，...