Redux入门0x101: 简介及`redux`简单实现

0x000 概述

这一章开始讲redux，其实是承接前面的react，但其实作为一个框架来说，redux和react并没有太多的关系，本身是独立存在的。在我看来它们的关系不会比共用re开头更深了，所以我就重新开了一个头，但其实是基于前面写的...

0x001 redux资源

• 中文文档
• 英文文档
• 官方视频

0x002 学习历程

当初为了学习redux，看了许多的材料，中途曾经放弃两次，但是最后还是勇敢的拿起了它，现在终于勉强弄懂。

• 第一次是大家都说redux牛逼，所以就打算学习一下，看了许多遍了redux中文文档，也看了英文文档--因为有些demo总是跑的不成功，怕是中文更新不及时的原因。但最后还是不了了之，因为不知道用它来干啥，反倒弄出了一堆的reducer、action之类的东西。
• 第二次是在做毕业设计的时候，做了一个类似看板一样的api自动测试及性能统计分析项目--类似postman，在这里遇到了一些超级棘手的问题，其中的最大的问题就是组件间通信和统一的状态管理。因为是有一个超级复杂的组件操作方式和组件嵌套，在做组件间通信的时候，为了保持状态的一致性，不断的将事件和属性一层一层往下传、或者往上传。真是糟糕的回忆啊....... 当时用的是Angular2。而我为了解决这个问题，写了一套基于订阅-发布模式的事件通知框架，原本想解决这些问题，结果，确实解决了组件间通讯和统一状态管理的问题，但是最终带来的确实更加复杂的事件管理和更加无无序的组件关系....
• 后来使用vue+vuex做了一些项目，反倒是突然领悟的redux的思想，就开始了第三次的学习，直到现在，我觉稍微缓解了我在前端项目所受到的伤害，redux的文档有点像上帝视角，他好像在说，我知道你应该知道的，所以我这么说你应该懂得，其实我不懂。所以我要从凡人视角说说redux，扒开他的神袍，看看他的胸毛......

0x003 再说一些废话

在前面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，语言也好，框架也罢，都是为了向伟大航线进发而服务的。

一句话总结：自由，然后秩序，接着是世间万物。

0x004 订阅-发布模式

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<Function>，当我们订阅事件的时候，即调用sub的时候，就会形成如下的数据结构：

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

当我们调用pub的时候，就或寻找到这个事件名，并循环将该事件名下挂载的callback队列执行。
当我们调用unsub的时候，则会将这个callback从队列中移除，这样就不会执行了。

redux的原理和这个简陋的框架类似，就是比这精巧多了，不过本质还是一样的，我们可以订阅某个值的变化，然后在某个值变化并收到这个通知的时候作出我们自己的逻辑。

接下来我们会使用redux，然后通过redux来改造这个我们的ledux，打造成至少表面上类似的......

0x005 redux栗子

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中处理这个请求。

0x006 ledux实现：

• 编写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的深入学习，这个框架也可以不断的深入发展。

0x007 资源

• 源码