摘要：在我看來它們的關(guān)系不會比共用開頭更深了，所以我就重新開了一個頭，但其實是基于前面寫的資源中文文檔英文文檔官方視頻學(xué)習(xí)歷程當(dāng)初為了學(xué)習(xí)，看了許多的材料，中途曾經(jīng)放棄兩次，但是最后還是勇敢的拿起了它，現(xiàn)在終于勉強弄懂。

這一章開始講redux，其實是承接前面的react，但其實作為一個框架來說，redux和react并沒有太多的關(guān)系，本身是獨立存在的。在我看來它們的關(guān)系不會比共用re開頭更深了，所以我就重新開了一個頭，但其實是基于前面寫的...

中文文檔

英文文檔

官方視頻

當(dāng)初為了學(xué)習(xí)redux，看了許多的材料，中途曾經(jīng)放棄兩次，但是最后還是勇敢的拿起了它，現(xiàn)在終于勉強弄懂。

第一次是大家都說redux牛逼，所以就打算學(xué)習(xí)一下，看了許多遍了redux中文文檔，也看了英文文檔--因為有些demo總是跑的不成功，怕是中文更新不及時的原因。但最后還是不了了之，因為不知道用它來干啥，反倒弄出了一堆的reducer、action之類的東西。

第二次是在做畢業(yè)設(shè)計的時候，做了一個類似看板一樣的api自動測試及性能統(tǒng)計分析項目--類似postman，在這里遇到了一些超級棘手的問題，其中的最大的問題就是組件間通信和統(tǒng)一的狀態(tài)管理。因為是有一個超級復(fù)雜的組件操作方式和組件嵌套，在做組件間通信的時候，為了保持狀態(tài)的一致性，不斷的將事件和屬性一層一層往下傳、或者往上傳。真是糟糕的回憶啊....... 當(dāng)時用的是Angular2。而我為了解決這個問題，寫了一套基于訂閱-發(fā)布模式的事件通知框架，原本想解決這些問題，結(jié)果，確實解決了組件間通訊和統(tǒng)一狀態(tài)管理的問題，但是最終帶來的確實更加復(fù)雜的事件管理和更加無無序的組件關(guān)系....

后來使用vue+vuex做了一些項目，反倒是突然領(lǐng)悟的redux的思想，就開始了第三次的學(xué)習(xí)，直到現(xiàn)在，我覺稍微緩解了我在前端項目所受到的傷害，redux的文檔有點像上帝視角，他好像在說，我知道你應(yīng)該知道的，所以我這么說你應(yīng)該懂得，其實我不懂。所以我要從凡人視角說說redux，扒開他的神袍，看看他的胸毛......

在前面react的文章中，我一直在重復(fù)react中都是js，就是為了把思想引回react的本質(zhì)，react是基于js寫的一個框架而已，只是一個框架，并不是一門獨立的語言。很多人總是用了jQuery就忘了原生，用了React就忘了jQuery和原生。而來了redux，就必須和react綁定。這是一個極大的思想誤區(qū)，從個體上來說，vue是獨立的、自由的，react也是獨立的、自由的，redux也是獨立的、自由的。

的確有redux在react中的最佳實踐，卻絕對沒有redux的唯一實踐這種說法，在js的世界中，各大框架各放異彩，他們既可以兼容并濟，也可以相互排斥，不過就是js中的一員罷了。每個框架就像每個人一樣，有自己的特點，react可以構(gòu)建ui，redux能夠管理狀態(tài)，axios在行網(wǎng)絡(luò)，angular啥都行！你可以在vue中使用redux，也可以在vue中使用jQuery，甚至也可在你自己的項目中同時使用vue和react，語言也好，框架也罷，都是為了向偉大航線進發(fā)而服務(wù)的。

一句話總結(jié)：自由，然后秩序，接著是世間萬物。

redux本質(zhì)上也是基于訂閱-發(fā)布模式的產(chǎn)物（我記得沒錯的話，如果記錯了，之后回來改），和我寫的那個小框架一樣.....，所以在使用redux之前，先來研究一下這個模式，看看我之前寫的那個小東西：

let eventMap = {}

class MyEvent {

    /**
     * 發(fā)布一個事件并附帶一份數(shù)據(jù)
     *
     * @param name 發(fā)布的事件名
     * @param data 附帶的數(shù)據(jù)
     */
    static pub(name, data) {
        if (!eventMap.hasOwnProperty(name)) return
        let callbacks = eventMap[name]
        if (callbacks.length === 0) return
        callbacks.forEach((callback) => {
            callback(data)
        })


    }

    /**
     * 訂閱一個事件并附帶一個回調(diào)
     * 說明這個事件發(fā)生的時候所要做的事情
     *
     * @param name 訂閱的事件名稱
     * @param callback 回調(diào)
     * @returns {function(): *} 返回一個函數(shù), 執(zhí)行這個函數(shù)將會取消訂閱
     */
    static sub(name, callback) {
        let callbacks = []
        if (eventMap.hasOwnProperty(name)) {
            callbacks = eventMap[name]
        }
        callbacks.push(callback)
        eventMap[name] = callbacks
        return () => callbacks.shift(callback)
    }

}

export default MyEvent

這個庫一共只有兩個接口：

pub(name:String,data:data):void：發(fā)布一個事件，這個事件附帶一些數(shù)據(jù)，當(dāng)這個事件發(fā)布的時候，所有訂閱這個事件的都將會收到通知，并執(zhí)行訂閱這個事件的時候定義的操作，即回調(diào)函數(shù)。

sub(name:String,callback:Function):Fuction：訂閱一個事件，當(dāng)這個事件發(fā)生的時候，即調(diào)用pub的時候，該callback就會執(zhí)行，并且在callback中可以收到這個事件發(fā)生的時候的附帶數(shù)據(jù)。該函數(shù)還返回一個新的函數(shù)，調(diào)用這個函數(shù)可以取消訂閱該事件

案例：

import MyEvent from "../../0x012-component-communication/src/MyEvent"

// 定義一個變量
let num = 1
// 定義一個事件名
const EVENT_INCREMENT = "EVENT_INCREMENT"

// 訂閱這個事件，并將取消訂閱的函數(shù)保存起來
let unSub = MyEvent.sub(EVENT_INCREMENT, (data) => {
    console.log(data)
})
// 當(dāng) num 發(fā)生變化的時候，發(fā)布這個時間
num += 1
MyEvent.pub(EVENT_INCREMENT, {num: num})

// 當(dāng) num 發(fā)生變化的時候，發(fā)布這個時間
num += 1
MyEvent.pub(EVENT_INCREMENT, {num: num})

// 取消訂閱
unSub()

// 當(dāng) num 發(fā)生變化的時候，發(fā)布這個時間
num += 1
MyEvent.pub(EVENT_INCREMENT, {num: num})
// 當(dāng) num 發(fā)生變化的時候，發(fā)布這個時間
num += 1
MyEvent.pub(EVENT_INCREMENT, {num: num})
console.log({num})

查看瀏覽器，可以看到，我們收到了兩次通知，因為我們在中途取消了訂閱

原理就是保存了MyEvent中的eventMap保存了一個Map，該Map是一個String=>Array，當(dāng)我們訂閱事件的時候，即調(diào)用sub的時候，就會形成如下的數(shù)據(jù)結(jié)構(gòu)：

name                 |    callbacks
EVENT_INCRECEMENT    |    (data)=>{...}
-                    |    (data)=>{...}
-                    |    (data)=>{...}
EVENT_DECRECEMENT    |    (data)=>{...}
-                    |    (data)=>{...}

當(dāng)我們調(diào)用pub的時候，就或?qū)ふ业竭@個事件名，并循環(huán)將該事件名下掛載的callback隊列執(zhí)行。
當(dāng)我們調(diào)用unsub的時候，則會將這個callback從隊列中移除，這樣就不會執(zhí)行了。

redux的原理和這個簡陋的框架類似，就是比這精巧多了，不過本質(zhì)還是一樣的，我們可以訂閱某個值的變化，然后在某個值變化并收到這個通知的時候作出我們自己的邏輯。

接下來我們會使用redux，然后通過redux來改造這個我們的ledux，打造成至少表面上類似的......

import {createStore} from "redux"

// 定義一個 reducer
function counter(state = 0, action) {
    switch (action.type) {
        case "INCREMENT":
            return state + 1
        case "DECREMENT":
            return state - 1
        default:
            return state
    }
}

// 定義一個store，持有全局的 state
let store = createStore(counter)

// 訂閱，并輸出 state
store.subscribe(() =>
    console.log(store.getState())
)
// 發(fā)布一個事件
store.dispatch({type: "INCREMENT"})
store.dispatch({type: "INCREMENT"})
store.dispatch({type: "DECREMENT"})

查看瀏覽器

可以看到，其實模式差不多：

定義數(shù)據(jù)：

redux:reducer 部分

MyEvent:let num部分

訂閱：

redux:subscribe 部分

MyEvent:sub部分

發(fā)布：

redux:dispatch 部分

MyEvent:pub部分

但是其實內(nèi)部差別又非常大，在MyEvent中，都是很隨意的，我可以隨便定義事件，隨便修改數(shù)據(jù)，隨便發(fā)布事件，所以我寫的東西叫做事件通知，而不是狀態(tài)管理。redux是用來做狀態(tài)管理的，可以說是在事件通知之中再一次做了封裝。

在MyEvent中數(shù)據(jù)是可以隨意修改的，但是在redux中，數(shù)據(jù)的修改只能通過dispatch提交一個修改請求，而在reducer中處理這個請求。

編寫redux

class Ledux {
    static createStore(reduer) {
        return new Store(reduer)
    }
}

class Store {
    constructor(reducer) {
        this.state = reducer(null, {})
        this.callbacks = []
        this.reducer = reducer
    }

    subscribe(callback) {
        this.callbacks.push(callback)
    }

    getState() {
        return this.state
    }

    dispatch(action) {
        this.state = this.reducer(this.state, action)
        this.callbacks.forEach(callback => callback())
    }

}

export default Ledux

使用Ledix

import Ledux from "./ledux";

function counter(state = 0, action) {
    switch (action.type) {
        case "INCREMENT":
            return state + 1
        case "DECREMENT":
            return state - 1
        default:
            return state
    }
}
let store=Ledux.createStore(counter)

store.subscribe(()=>{
    console.log(store.getState())
})

store.dispatch({type: "INCREMENT"})
store.dispatch({type: "INCREMENT"})
store.dispatch({type: "DECREMENT"})

查看瀏覽器

可以看到，效果是一樣的，而過程除了我喜歡用class封裝以外也沒有太大的區(qū)別，就這樣實現(xiàn)了ledux了，當(dāng)然隨著對redux的api的深入學(xué)習(xí)，這個框架也可以不斷的深入發(fā)展。

源碼