图解 redux 和 react 的关系

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

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



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

redux



react



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



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

将onChage替换为dispatch(Action);

将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的函数的两个参数分别将

Store中的状态映射到component.props中;

2. 将Action映射到component的事件中；