图解 redux 和 react 的关系

最近研究了下redux项目里的example里面的目录结构，发现里面文件夹比较多，概念也比较多，所以画图整理一下；

以examples中的real-world为例，文件结构长这个样子：

先简单看一下redux和react的数据流：

redux

react

在react中使用redux是用Store将state替换掉，变成下面的情况；

这个变换过程要做的事情是：

1. 将onChage替换为dispatch(Action);

2. 将store中的状态引入到Component中用于render；

就是上图中Component的出口和入口两个点，着两个点对接好，数据流就接通了。

看看examples里是怎么做的，它的目录结构里包含了6个文件夹components，actions，middleware，reducers，store，containers：分别对应上图的五块再加上数据连接：

• components存储Component的代码

• actions存储Actions的代码

• middleware存储redux中间件的代码

• reducers存储Reducer的代码

• store存储初始化Store的代码

• containers最关键，将Component的事件、状态分别连接到Action和Store；

比如containers/UserPage.js的代码：

最后这个connect的函数的两个参数分别将

1. Store中的状态映射到component.props中;
   2. 将Action映射到component的事件中；