摘要：就是那個(gè)將要全權(quán)代管你所有組件的那家伙用的自述來(lái)說(shuō)就是是狀態(tài)容器，提供可預(yù)測(cè)化的狀態(tài)管理。

你若裝逼，請(qǐng)帶我飛！

從前，從前，聽(tīng)說(shuō)React只負(fù)責(zé)UI，話說(shuō)寫Angular代碼就像寫后端，現(xiàn)在看來(lái)，React贏在情懷上了；

我認(rèn)為沒(méi)必要老是拿React和Angular做比較，Angular是一套大而全的相對(duì)完備的框架；而React確實(shí)是只負(fù)責(zé)UI，只是多出很多概念層的東西，需要自己以此去構(gòu)造；React更像是打造一個(gè)由React作為主線的生態(tài)；以component為基礎(chǔ)，虛擬DOM解決性能瓶頸，單向數(shù)據(jù)流統(tǒng)一管理components，webpack、ES6、JSX完美融合，還有Flux、Redux等架構(gòu)方案及其周邊擴(kuò)展，加上React Native；說(shuō)好的只負(fù)責(zé)UI呢，這是通吃的節(jié)奏啊！這是一條情懷路線，擊中了很多前端人長(zhǎng)期以來(lái)對(duì)Web探索的痛點(diǎn)：Web Components；所以才能振臂一呼，應(yīng)者云集；而當(dāng)你真正開(kāi)始走進(jìn)React，你會(huì)發(fā)現(xiàn)，正如老羅所說(shuō)：“漂亮的不像實(shí)力派！”；

實(shí)在是機(jī)緣巧合，之前的博客有一篇《富文本編輯器小記 — 關(guān)于撤銷、重做操作》，是關(guān)于簡(jiǎn)單的canvas操作和富文本編輯器里自定義撤銷重做的方法，現(xiàn)在發(fā)現(xiàn)LOW爆了，因?yàn)镽edux的文檔中就有一個(gè)關(guān)于撤銷重做的實(shí)例；算是被Redux教做人了，所以正式?jīng)Q定要開(kāi)始Redux了；話說(shuō)Redux對(duì)于一般不是那么復(fù)雜的有很多狀態(tài)管理的地方并不是必須的，本來(lái)state和props可以好好的玩耍，現(xiàn)在半路殺出了個(gè)Redux，并全權(quán)掌控了state，這么高逼格，請(qǐng)帶我飛吧！

不要問(wèn)Redux是什么。。。就是那個(gè)將要全權(quán)代管你所有組件state的那家伙！用Redux的自述來(lái)說(shuō)就是：

Redux 是 JavaScript 狀態(tài)容器，提供可預(yù)測(cè)化的狀態(tài)管理。

如果你之前不懂Redux，那么看到這句話，你可能依然很平靜，或是腦子開(kāi)始打轉(zhuǎn)，有些似懂非懂，甚至有點(diǎn)迷惑，唉，其實(shí)就是依然不懂嘛！

既然state從此是路人，那么咱就得安心的開(kāi)始寫action和reducer了，一起走進(jìn)Redux；

Redux提供的是一套機(jī)制，所以并不太容易一下子接受，話說(shuō)React從開(kāi)始到現(xiàn)在有太多不太容易一下子接受的地方了，關(guān)鍵是都是很有逼格的玩意，所以要想飛的更高，就該把地平線忘掉！Redux 是 JavaScript 狀態(tài)容器也叫Store，它是由所有組件state組成的一個(gè)對(duì)象樹，也可以把它看作一個(gè)大的JSON，或是一個(gè)屬于前端的小數(shù)據(jù)庫(kù)，不再操作state，而是對(duì)這個(gè)大的JSON進(jìn)行增刪改查；只是操作方式由Redux提供；

1、action和actionCreator

action是Store數(shù)據(jù)的來(lái)源，本身就是一個(gè)普通的js對(duì)象，type字段是必須的，指明干了什么；不同業(yè)務(wù)類型的action可以各自多帶帶存放，actionCreator函數(shù)僅返回一個(gè)action，由dispatch(action)調(diào)用來(lái)更新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
    }
}

如上，聲明了兩個(gè)action的type：ADD和DEL；兩個(gè)actionCreator：addOne和delOne，分別返回一個(gè)action；

2、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是一個(gè)純函數(shù)，接收舊state和action，返回新state；

(previousState,action)=>newState；

reducer可以拆分為多個(gè)，最后由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});

3、連接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 (
            

                

                length:{this.props.length};datas:{this.props.value}

                
                {this.props.children}
            
        );
    }
}

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來(lái)連接該組件與Redux；既然state都聚集到了Store里，那么映射后的props的取值和修改將都指向Store，這個(gè)由Provider解決；

4、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(
    
        
            
        
    ,
    document.getElementById("views")
);

現(xiàn)在Provider作為最外層容器并綁定Store的值，這樣，里面的組件中映射成為props的state就都能取到值了；至此，就基本將Redux引進(jìn)來(lái)了；可能把這個(gè)簡(jiǎn)單的增刪datas的玩意，用Angular和JQuery都是幾行代碼的事，而到了這里卻要幾十行代碼，又混進(jìn)來(lái)了一堆概念，而Redux并不僅僅就這些，像Middleware、高階函數(shù)什么的在往后的探索中將再一次刷新你的眼界；我只想說(shuō)，你咋不上天呢！但是，就這高逼格，哈哈，請(qǐng)帶我飛吧！

如果你已在路上，就勇敢的向前吧！