图解redux和react的关系

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

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

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

redux

         ┌──────────────────────────┐
         │                          │
         │                          │
         │               ┌────────────────────┐
         │               │      Reducers      │
         │               └────────────────────┘
         │                          ▲
         ▼                          │
┌────────────────┐       ┌────────────────────┐
│      Store     │       │     MiddleWares    │
└────────────────┘       └────────────────────┘
         │                          ▲
         │                          │
         │               ┌────────────────────┐
         │               │  dispatch(Action)  │
         │               └────────────────────┘
         │                          ▲
         │                          │
         └──────────────────────────┘

react

┌─────────────┐
│    State    │─────────────┐
└─────────────┘              │
       │                     │
       │             ┌──────────────┐
       │             │   onChange   │
       │             └──────────────┘
       │                     ▲
       ▼                     │
┌────────────┐               │
│ Component  │───────────────┘
└────────────┘

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

┌────────────┐
│   Store    │───────────────┐
└────────────┘                │
       │           ┌────────────────────┐
       │           │      Reducers      │
       │           └────────────────────┘
       │                      ▲
       │                      │
       │           ┌────────────────────┐
       │           │     MiddleWares    │
       │           └────────────────────┘
       │                      ▲
       │                      │
       │           ┌────────────────────┐
       │           │  dispatch(Action)  │
       │           └────────────────────┘
       ▼                      ▲
┌────────────┐                │
│ Component  │────────────────┘
└────────────┘

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

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的代码：

function mapStateToProps(state, ownProps) {
  const { login } = ownProps.params

  return {
    login
  }
}

import {loadUser, loadStarred} from '../actions';
export default connect(mapStateToProps, {
  loadUser,
  loadStarred
})(UserPage)

最后这个connect的函数的两个参数分别将
1. Store中的状态映射到component.props中;
2. 将Action映射到component的事件中；