前言

平时使用React做开发的同学对Redux都不会陌生，这是一个基于flux架构的十分优秀的状态管理库。这是Redux官方文档对它的描述。

Redux 是 JavaScript 状态容器，提供可预测化的状态管理。可以让你构建一致化的应用，运行于不同的环境（客户端、服务器、原生应用），并且易于测试。

我们在学习的过程中，在能够使用它完成一些日常开发之后，如果要比较深入的了解一个库，可以去看看它的源码，而Redux的源码其实并不长。进而，我们可以模仿手写一个简单的Redux,提升coding能力的同时也有助于消化优秀的第三方库中蕴含的思想。

基础用法和对源码的部分解读之前也有已经发过，感兴趣的小伙伴可以移步Redux学习笔记---简单使用以及源码阅读

接下来咱们就开始手写一个简单的Redux吧！

不可变数据

Redux中有一个概念是不可变数据，指的是我们改变store里面的数据时不可以直接去对它赋值，而是需要使用一个方法去修改。使用这种方式有以下好处：

易于调试，当store发生变化时，可以记录前后变化的状态，很容易借此开发出类撤销、回退等功能
易于推测，由于需要触发了action变化，store才会变化，通过触发的action，我们可以判断当前的状态是什么。

而配合起一些Immutable库，还可以提升工程的性能。仅需要判断当旧的state与新的state不是同一个对象时，才去更新组件。而不需要去做一些深层次的遍历判断每个值是否相等。

创建`Store`实例

先来一个创建store的方法，而且对于状态管理来说，应该保证使用的时候全局单一实例。故有以下思路：

以闭包的形式创建state
用方法来修改state
state改变后可通知外部钩子，故引入发布订阅机制,调用subscribe方法订阅回调函数（listener应为函数类型）,再在state被改变的时候触发所订阅的回调函数，即changeState方法中遍历listeners中存储的函数。

如下封装代码

function createStore(initState) {
    let state = initState
    let listeners = []
    //订阅
    function subscribe(listener) {
        if(typeof listener == 'function'){
            listeners.push(listener)
        }
    }
    function changeState(newState) {
        listeners.forEach(func=>func())
        state = newState
    }
    function getState() {
        return state
    }
    return {
        subscribe,
        changeState,
        getState
    }
}

依据上述代码，可以如下创建一个store

const initState = {
    user:'David',
    age:18
}
//创建store
const store = createStore(initState)
//订阅回调函数
store.subscribe(() => {
    let state = store.getState();
    console.log(`${state.user.name}：${state.user.age}`);
});
store.subscribe(() => {
    let state = store.getState();
    console.log(state.counter.count);
});

store.changeState({
    ...store.getState(),
    user: {
        name: 'Jack',
        age: 19
    }
});

store.changeState({
    ...store.getState(),
    counter: {
        count: 20
    }
});

可以看到上述版本中有一个明显的缺陷：改变数据的时候是直接把一整个对象存进去的，这样对于我们开发的时候跟踪状态十分不便。所以接下来还是要引入reducer和action。

reducer和action

先来回忆一下Redux中是如果用reducer和action配合，修改state的。主要分为以下几步：

首先我们会在actionTypes.js文件中写好所有action的类型。例如

// actionTypes.js
export const ADD_COUNT = 'ADD_COUNT'

2.然后在对应的action文件中引入该type，返回对应的type类型，如果此时有额外的数据加入，一般会加多一个payload字段。

// actions/Count.js
import {ADD_COUNT} from "../actionTypes"
export function addCount() {
    return {
         type: ADD_COUNT
    }
}

3.根据action返回的type，触发reducer对应的方法

// reducers/Count.js
import {ADD_COUNT} from "../actionTypes";
const initialState = {
    count: 0
}
export function Count(state = initialState, action) {
    const count = state.count
    switch (action.type) {
        case ADD_COUNT:
            return {
                    count: count + 1
            }
        default: return state
    }
}

4.编写好reducer和action之后，创建store

//store.js
import {createStore} from 'redux'
import {Count} from './reducers/Count'
const store = createStore(Count)
export default store

5.最后，如下使用：

import store from './store'
import { addCount } from './actions/Count'
store.dispatch(addCount())

由上述看来，我们是要去实现一个dispatch方法。根据action返回的type，去触发对应的reducer重新计算更新state。所以咱们的createStore方法可以改造如下：

function createStore(initState, reducer) {
    let state = initState
    let listeners = []
    function subscribe(listener) {
        listeners.push(listener)
    }
    function dispatch(action) {
        listeners.forEach(item => item())
        //主要是这一句，将粗暴的changeState改成对应的reducer去修改。
        state = reducer(state, action())
    }
    function getState() {
        return state
    }
    return {
        subscribe,
        dispatch,
        getState
    }
}

使用如下：

let initState = {
    count: 0
}
function reducer(state, action) {
    switch (action.type) {
        case 'ADD':
            return {
                ...state,
                count: state.count + 1
            }
            break;
        default:
            return state
            break;
    }
}
let store = createStore(initState, reducer)

const ADD = 'ADD'

function add(){
    return {
        type:ADD
    }
}
//使用它
store.dispatch(add())

中间件

由于业务的多样性，单纯的修改 dispatch 和 reducer 显然不能满足大家的需要，因此redux提供了自由组合的、可插拔的中间件机制。在日常开发中，我们常常串联不同的中间件来满足我们的开发需求。在redux进行数据流改变时，中间件可以截获action，并对它进行修改。

记录日志中间件

中间件的编写，主要是重写了dispatch方法，先用next缓存之前的dispatch方法，再处理完中间件逻辑之后，调用的next方法其实就是调用一开始的action。

let store = createStore(initState, reducer)
let next = store.dispatch
store.dispatch = action => {
    //打印log
    console.log(`action:${action}`)
    console.log(`state:${store.getState()}`)
    //调用真正触发的action
    next(action)
    console.log(`next state : ${store.getState()}`)
}

记录异常中间件

了解了中间件的编码逻辑之后，我们很容易再开发出一个记录异常的中间件，如下：

let store = createStore(initState, reducer)
let next = store.dispatch
store.dispatch = action => {
    try{
        next(action)
    }catch(e){
        throw new Error(e)
    }
}

多中间件组合

使用Redux中，我们常常使用多个中间件串联，有了上述的经验之后，我们很轻松的可以如下组合起来。

let store = createStore(initState, reducer)
let next = store.dispatch
const loggerMiddleware = function (next) {
    return function (action) {
        console.log('this state', store.getState());
        console.log('action', action);
        next(action);
        console.log('next state', store.getState());
    }
}
const exceptionMiddleware = function (next) {
    return function (action) {
        try {
            next(action);
        } catch (err) {
            console.error('错误报告: ', err)
        }
    }
}
//重写dispatch方法，依次调用完中间件逻辑后，最后再触发真正的action
store.dispatch = exceptionMiddleware(loggerMiddleware(next))

const ADD = 'ADD'

function add(){
    return {
        type:ADD
    }
}

store.dispatch(add())
console.log(store.getState())

最后贴一张图，方便大伙儿理解~ 浏览器debugger

最后

行文至此，感谢阅读，如果您喜欢的话，可以帮忙点个like哟~

欢迎转载，但要注明出处哟~

该文章首发自【全栈web之路】，web开发之路，诚邀您携手同行。

关注公众号回复关键字【前端】，即可领取笔者备战秋招笔记

qrcode

手写简单Redux

前言