React-Native实战二（清理app缓存＋Redux ）

前言：前面做了一下rn的清理app缓存功能，下面把前面说的rn中处理页面与页面之间的数据传递问题解决一下，在解决之前，我们先来认识一下什么是redux。

先附上redux的官方demo地址：https://github.com/alinz/example-react-native-redux#counter-example
1、什么是redux？

redux是一个用于管理js应用状态的容器。redux出现时间并不是很长，在它出现之前也有类似功能的模块出现，诸如flux等等。redux设计的理念很简单，似乎最初这个开发团队就有让redux可以方便融入在server, browser, mobile client端的打算。目前在github上redux-*的第三方中间件、插件越来越多。如果react项目中想使用redux，那么就有react-redux插件来完成配合。
2、为什么要用redux？
搞过React Native的都知道，rn中更新组件主要通过改变state从而更新组件。
先盗用一张网络上的rn生命周期图：

当我们改变state的时候，rn会重新走一遍render方法，从而更新组件，但是在rn中，每个页面都管理者自己的state，如果需要一个页面管理另外一个页面的state，那么我们就有点无从下手了，但是redux很巧妙的帮我们管理着所有的state。
redux提供了一套机制来组织管理整个应用状态。
Redux有三部分组成：store，action，reducer。

• store:维护全局的state，以及将action和reducer结合起来。

• action：用来传递state的信息。（比如：我们在action中处理登陆操作，将返回的user对象传递给对应的reducer.）

• reducer:reducer是简单的处理函数，通过传入旧的state和指示操作的action来更新state，从而达到页面的刷新。
  

上图是redux状态改变的流程。action -> reducer -> 新store -> 反馈到UI上有所改变。

直白一点就是：用户发送点击清理缓存按钮(action)
—>
reducer接受到用户发送的action，并且接收到action中携带了（缓存大小、是否清理完毕等信息）
—>
reducer返回一个新的state（是否清理成功）
—>
state返回到全局变量store中
—>
回调用户页面方法，重新走render方法—>更新页面的值。

下面结合我们前面的清理缓存的例子来集成下redux：

首先安装相关库（进入项目的根目录执行下面命令）：

• 安装redux: npm install –save redux

• 安装redux绑定库: npm install –save React-redux

• 安装开发者工具: npm install –save-dev redux-devtools

• 安装异步action构造器: npm install –save redux-thunk

包都很小，想必大家很快就实现了！！

第一步：创建store

///创建redux 的 store
import  reducers from '../Redux/reducers';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';//引入异步操作
const middlewares = [thunk];
const createSoreWithMiddleware = applyMiddleware(...middlewares)(createStore);

class Main extends Component {
   
    // 构造
      constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            store:createSoreWithMiddleware(reducers)
        };
      }
    render() {
        //创建store
        return (
            <Provider store={
  this.state.store}>
                <Main2/>
            </Provider>
        );
    };
}
module.exports = Main;

以上是我的app主入口，Main2是我们的app主页面，也就是前面的那张截图。

我们需要把所有的reducer加载到store中，reducer就是用来处理返回给用户state的东西，

一般会创建一下index.js文件来统一管理所有的reduce文件：