React loves you —“洞悉Redux装的逼”

你若装逼，请带我飞！

I love React !

从前，从前，据说React只负责UI，话说写Angular代码就像写后端，如今看来，React赢在情怀上了；

我认为不必总是拿React和Angular作比较，Angular是一套大而全的相对完备的框架；而React确实是只负责UI，只是多出不少概念层的东西，须要本身以此去构造；React更像是打造一个由React做为主线的生态；以component为基础，虚拟DOM解决性能瓶颈，单向数据流统一管理components，webpack、ES六、JSX完美融合，还有Flux、Redux等架构方案及其周边扩展，加上React Native；说好的只负责UI呢，这是通吃的节奏啊！这是一条情怀路线，击中了不少前端人长期以来对Web探索的痛点：Web Components；因此才能振臂一呼，应者云集；而当你真正开始走进React，你会发现，正如老罗所说：“漂亮的不像实力派！”；

Redux 来了 ！

实在是机缘巧合，以前的博客有一篇《富文本编辑器小记 — 关于撤销、重作操做》，是关于简单的canvas操做和富文本编辑器里自定义撤销重作的方法，如今发现LOW爆了，由于Redux的文档中就有一个关于撤销重作的实例；算是被Redux教作人了，因此正式决定要开始Redux了；话说Redux对于通常不是那么复杂的有不少状态管理的地方并非必须的，原本state和props能够好好的玩耍，如今半路杀出了个Redux，并全权掌控了state，这么高逼格，请带我飞吧！

不要问Redux是什么。。。就是那个将要全权代管你全部组件state的那家伙！用Redux的自述来讲就是：

Redux 是 JavaScript 状态容器，提供可预测化的状态管理。

若是你以前不懂Redux，那么看到这句话，你可能依然很平静，或是脑子开始打转，有些似懂非懂，甚至有点迷惑，唉，其实就是依然不懂嘛！

既然state今后是路人，那么咱就得安心的开始写action和reducer了，一块儿走进Redux；

Redux提供的是一套机制，因此并不太容易一会儿接受，话说React从开始到如今有太多不太容易一会儿接受的地方了，关键是都是颇有逼格的玩意，因此要想飞的更高，就该把地平线忘掉！Redux 是 JavaScript 状态容器也叫Store，它是由全部组件state组成的一个对象树，也能够把它看做一个大的JSON，或是一个属于前端的小数据库，再也不操做state，而是对这个大的JSON进行增删改查；只是操做方式由Redux提供；

一、action和actionCreator

action是Store数据的来源，自己就是一个普通的js对象，type字段是必须的，指明干了什么；不一样业务类型的action能够各自单独存放，actionCreator函数仅返回一个action，由dispatch(action)调用来更新state；

// action type:datas
export const ADD='ADD';
export const DEL='DEL';

// action creator:datas
export function addOne(data){
    return {
        type:ADD,
        payload:data
    }
}
export function delOne(ins){
    return {
        type:DEL,
        index:ins
    }
}

如上，声明了两个action的type：ADD和DEL；两个actionCreator：addOne和delOne，分别返回一个action；

二、reducer

action只是指明干了什么，reducer则指明该怎么干什么；

// reducer
import {ADD,DEL} from './actions';
const initDatasState={datas:[],length:0};
export function datasJson(state=initDatasState,action){
    switch (action.type) {
        case ADD:
        return {datas:[...state.datas,action.payload],length:state.length+1};
        case DEL:
        if (state.length<=0) {
            return state;
        }
        state.datas.forEach((a,i)=>{
            i==action.index&&state.datas.splice(i,1);
        });
        return {datas:state.datas,length:state.length-1};
        default:
        return state;
    }
}

reducer是一个纯函数，接收旧state和action，返回新state；

(previousState,action)=>newState；

reducer能够拆分为多个，最后由combineReducers合并；

import {combineReducers} from 'redux';
//reducer1
function reducer1(initState,action){
    //return newState
}
function reducer2(initState,action){
    //return newState
}
export default combineReducers({reducer1:reducer1,reducer2:reducer2});

三、链接Redux

引入Redux后，你的App.js可能该这么写了：

import React from 'react';
import {connect} from 'react-redux';
import {addOne,delOne} from './actions';

class App extends React.Component{
    render(){
        return (
            <div>
                <input type="button" onClick={this.props.onAdd} value="addOneItem"/><br/>
                length:<b>{this.props.length}</b>;datas:<i>{this.props.value}</i><br/>
                <input type="button" onClick={this.props.onDel} value="delFirst"/>
                {this.props.children}
            </div>
        );
    }
}

function mapStateToProps(state){
    return {
        value:JSON.stringify(state.datas),
        length:state.length
    }
}
function mapDispatchToProps(dispatch){
    return {
        onAdd:()=>{
            let data={id:Math.round(Math.random()*10),text:Math.round(Math.random()*1000000000).toString(16)};
            dispatch(addOne(data));
        },
        onDel:()=>{
            dispatch(delOne(0));
        }
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(App);

现在state已所有交由Redux代管了：mapStateToProps将state绑定映射为props；mapDispatchToProps将修改state的操做映射为props，connect来链接该组件与Redux；既然state都汇集到了Store里，那么映射后的props的取值和修改将都指向Store，这个由Provider解决；

四、Provider

import React from 'react';
import ReactDOM from 'react-dom';
import {createStore} from 'redux';
import {Provider} from 'react-redux';
import {reducers} from './reducers';
import App from './app';

const Store=createStore(reducers);
console.log(Store.getState());
ReactDOM.render(
    <Provider store={Store}>
        <App>
            <Inpt />
        </App>
    </Provider>,
    document.getElementById('views')
);

如今Provider做为最外层容器并绑定Store的值，这样，里面的组件中映射成为props的state就都能取到值了；至此，就基本将Redux引进来了；可能把这个简单的增删datas的玩意，用Angular和JQuery都是几行代码的事，而到了这里却要几十行代码，又混进来了一堆概念，而Redux并不只仅就这些，像Middleware、高阶函数什么的在日后的探索中将再一次刷新你的眼界；我只想说，你咋不上天呢！可是，就这高逼格，哈哈，请带我飞吧！

若是你已在路上，就勇敢的向前吧！