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

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

中文文檔

英文文檔

官方視頻

當初為了學習redux，看了許多的材料，中途曾經放棄兩次，但是最后還是勇敢的拿起了它，現在終于勉強弄懂。

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

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

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

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

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

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

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

let eventMap = {}

class MyEvent {

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


    }

    /**
     * 訂閱一個事件并附帶一個回調
     * 說明這個事件發生的時候所要做的事情
     *
     * @param name 訂閱的事件名稱
     * @param callback 回調
     * @returns {function(): *} 返回一個函數, 執行這個函數將會取消訂閱
     */
    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：發布一個事件，這個事件附帶一些數據，當這個事件發布的時候，所有訂閱這個事件的都將會收到通知，并執行訂閱這個事件的時候定義的操作，即回調函數。

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

案例：

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

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

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

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

// 取消訂閱
unSub()

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

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

原理就是保存了MyEvent中的eventMap保存了一個Map，該Map是一個String=>Array，當我們訂閱事件的時候，即調用sub的時候，就會形成如下的數據結構：

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

當我們調用pub的時候，就或尋找到這個事件名，并循環將該事件名下掛載的callback隊列執行。
當我們調用unsub的時候，則會將這個callback從隊列中移除，這樣就不會執行了。

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

接下來我們會使用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())
)
// 發布一個事件
store.dispatch({type: "INCREMENT"})
store.dispatch({type: "INCREMENT"})
store.dispatch({type: "DECREMENT"})

查看瀏覽器

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

定義數據：

redux:reducer 部分

MyEvent:let num部分

訂閱：

redux:subscribe 部分

MyEvent:sub部分

發布：

redux:dispatch 部分

MyEvent:pub部分

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

在MyEvent中數據是可以隨意修改的，但是在redux中，數據的修改只能通過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封裝以外也沒有太大的區別，就這樣實現了ledux了，當然隨著對redux的api的深入學習，這個框架也可以不斷的深入發展。

源碼