Redux中间件在React和React-Native项目架构中的应用实践

前言

在MVVM框架模式独揽天下的今天，React凭借其独特的设计思想，深入的设计理念，开辟了一条崭新的康庄大道，实属是一个重大的突破，为什么这么说呢？因为React论其设计思想，充其量只是MVVM种的V而已，对于大量而且复杂的数据来讲，自身处理上显得有些力不从心，这时候，传统的Redux和Flux的设计思想起到了决定性的作用，对于Redux和Flux这里不多赘述，这个观念在这两年被炒的异常火热，网上我们可以搜到很多的资源，最重要的是，单向数据流的观念越来越被众多的开发者应用于项目架构之中，一定程度上来讲这种设计思想，很大程度上提升了应用的性能，对此我就来谈谈我再React项目中的应用实践以及相应的观点。

react-redux分析

其实，Redux和React两个框架之间并没有绝对的联系，他们都是独立的JS框架，一个出于View层，一个用于state管理，两者之间可以相互使用，但是API融合度并不是很高，使用起来不是特别的方便，于是便有了React-redux, 借助react-redux这个库提供一些封装，一种更科学的代码组织方式，让我们更舒服地在React的代码中使用Redux。

react-redux主要提供的常用接口有：

1. provider: Provider这个模块是作为整个App的容器，在你原有的App Container的基础上再包上一层，用于传递props。

2. connect:连接Redux和React。

Store的作用与分析

store翻译过来讲就是存储，这个模块有redux提供，而不是react-redux, 主要用于存储应用所有的state。类似于一个大的临时存储数据库。

创建代码也很简单：

....
import { applyMiddleware, createStore, compose } from 'redux';
....
const store = createStore(reducers, undefined, middlewares);
.....
.....

Action的作用分析

action顾名思义就是各种操作，对于redux来讲，view的每一种处理都会对应一种操作，每个action的定义也很简单，主要变量是一个type，定义了当前action是处理什么的。

view ==> dispatch ===> action

通常，也有开发者会在action中访问请求数据，比如http数据请求等等。

看下代码：

const loginAction = (data) => {
    return {
  type: LOGIN_REQUE