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、高階函數什麼的在日後的探索中將再一次刷新你的眼界；我只想說，你咋不上天呢！可是，就這高逼格，哈哈，請帶我飛吧！

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