学习文档： http://cn.redux.js.org/

redux是什么

    状态管理工具

Action

action 本质上是JacaScript普通对象。我们预定，action内必须使用一个字符串类型的type字段来表示将要执行的动作，说白了就是告诉store要执行什么操作

Reducer

reducer指定了应用状态的变化如何响应ation并发送到store的，记住actions只是描述了有事情发生了这一事实，并没有描述应用如何更新state，说白了reducer就是一个函数，具体对store进行什么操作

Store

store 里面存储着公共的状态

getState  

 获取状态

dispatch 

  触发action 修改状态  一个派发方法  改变内部state唯一方法是dispatch一个action

subscribe（Listener）

注册监听器   它会订阅store当公共的状态发生改变时自动触发更新

Redux设计思想

数据流是我们的行为和响应的抽象，单项数据流有助于明确具体的行为和对应的响应，实现状态的可预测，redux是一个全局状态管理，实现跨组件通讯

Redux的优点

复杂的组件通讯，单向的数据流动，状态只能通过纯函数reducer操作

Redux基本概念

保证单向数据的流动，同时便于测试，使用控制 

如何使用Redux

1npm install redux --save    //下载redux模块

2.创建redux.js文件

var s={                     //定义state默认值

            title:"你好   世界",

            arr:[],

}

function reducer(state=s,action){                                                                            //传入旧的state   ，     action  返回新的state

    switch (action.type) {                                                                                      // action数据结构：action{type："add",d:{id:123}}    获取action.type

                case "add":                                                                                                //匹配值对数据操作

                            // return                                                                                        //返回操作后的数据

                            break;                                                                                            //结束本次匹配

                        case "up":

                            var colen=JSON.parse(JSON.stringify(state))                            //将旧的深度克隆 对副本进行操作

                            colen.title=action.d.title ;                                                            //修改指定的值

                             return  colen                                                                             // 返回修改的值

                

               default:                                                                                                    //当前的值都不匹配

                    return state                                                                                        //返回默认的值

    }

}

//导出函数

export default      reducer

2.创建store.js文件

import {createStore}from "redux"                 //引入redux提供创建createStore模块

import reducer from "./reducer";                    //引入创建好的reducer文件

var store=createStore(reducer);                    //创建store

export default store                                        //导出 store 

3.按需引用，有需要使用的公共状态的组件引入即可

import React, {Component}from 'react';                                           //引入react模块

import store from "../store/storage";                                                //引入仓库

class Home extends Component {                                                    //创建类组件

    constructor(props) {                                                                    //constructor  构造函数

            super(props);                                                                      //super接收组件传递的参数

            var s=store.getState();                                                       //获取store的数据  所有的状态

            store.subscribe(this.getData)                                              //把getData方法  订阅到注册器中  每次更新仓库 会自动再次调用

        //将获取的状态注册到监听器里面  监听器相当于数组  arr.push(n) 每次修改完 内部自动触发方法 将数据更新

        this.state={

                                g:s                                                                   //将store的数据给到当前状态的g

                            }

        }

getData=()=>{

                var s=store.getState()                                                    //获取仓库的状态

                this.setState({g:s})                                                        //更新当前的状态

    }

updata=()=>{

                //触发仓库的action

                store.dispatch({type:"up",d:{title:"世界那么大我想去看看",name:"jack",age:18}})            //把当前需要发送的数据到仓库  多个属性需要使用json个格式传递

    }

render() {

            return (

                      <div>

                                {

                                    this.state.g.title

                             }

                                <button onClick={this.updata}>修改标题</button>

                    </div>

                        );

                    }

}

export default Home;