图解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的事件中；