17、react之 reudx

不使用redux：
    1、用户操作简单
    2、用户之间没有协作
    3、不需要与服务器的大量交互
使用redux：
    上面三条取反
    组件需要共享
    一个组件需要改变另一个组建的状态
redux的核心

    store：

        看成是一个保存数据的地方，一个容器。（react中的一个数据库） 整个应用  只能有  有一个store

        提供的方法：
            提供 getState() 方法获取 state；
            提供 dispatch(action) 方法更新 state；唯一一个更新state的方法
            通过 subscribe(listener) 注册监听器; 监听action、state的变化，一旦state发生变化，就是行这个 listener。一般 react 的项目就是组件的render
            或者是setState方法。返回一个函数A，调用A接触监听通过 subscribe(listener) 返回的函数注销监听器。
    action：（一个描述发生什么的对象）
        通过 state 的状态来改变显示的东西（View）。但是，用户接触不到state，接触的是View。state变化导致View变化。这个Action就是View发出的通知，表示state应该要变化了
        action是一个对象，{} ，里面至少有一个属性  type（必须拥有），表示的就是action的名字，其他的属性可以自己设置
            {
                type:'ADD',
                text,   ==> text:text
                id    ==> id:id
            }
    reducer：（描述 action 如何改变 state 树）
        render单独放在一个文件夹里面（reducers）用来改变状态的一个函数
        reducer 就是一个纯函数，接收旧的 state 和 action，返回新的 state。（注意： state 的形式取决于你，可以是基本类型、数组、对象、 甚至是 Immutable.js 生成的数据结构。惟一的要点是当 state 变化时需要返回全新的对象，而不是修改传入的参数。）
        store收到action以后，给出一个新的state，View发生改变。

        这种state的计算过程就是reducer

案例：计数器（不使用 reudx）

import React, { Component } from 'react';class Counter extends Component {    state = {        count: 0    }    handleClick=(key)=> {        if( key === 'ADD' ){            this.setState({                count: this.state.count + 1            })            return;        }        this.setState({            count: this.state.count - 1        })    }    change(){        if(this.state.count%2 !== 0 ){            this.handleClick('ADD')        }    }    delay(){        var This = this;        // setTimeout(this.handleClick('ADD'),1000)        setTimeout(function(){            This.handleClick('ADD')        },1000)    }    render() {        return (            <div>                点击{this.state.count}次                <button onClick={this.handleClick.bind(this,'ADD')}>+</button>                <button onClick={this.handleClick.bind(this,'DEL')}>-</button>                <button onClick={this.change.bind(this)}>基变偶</button>                <button onClick={this.delay.bind(this)}>延时加一</button>            </div>        )    }}export default Counter;

案例：计数器（使用 reudx）

详细说明见：http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html