1、redux源码探索

一、创建store

const {createStore} = Redux;
//reducer是研发自己写的reducer函数
//preloadState是初始state数据
//enhancer这是对dispatch进行加强，即中件间
const store = createStore(reducer, preloadState, enhancer)

store作为一个对象，提供了以下方法

{
    dispatch, //触发更新store的方法
    getState, //直接获取页面数据状态的方法
    subscribe, //订阅store状态变化的方法
    replaceReducer //替换reducer
} = store

上面的方法使用方式（不依赖 react）：

//订阅store状态的变化，适时渲染
const render = () => {
    document.body.innerText = store.getState();
}
store.subscribe(render);
render();
//响应页面交互
document.addEventListener('click', () => {
    store.dispatch({
        type: 'example'
    })
})

分析：

//1、store实例持有当前状态。使用闭包的方式
const createStore = () => {
    //存储当前状态
    let state;
    const getState = () => state;
    const display = (action) => {...};
    const subscribe = () => {...};
    return {
        getState, display, subscribe
    }
}

以上是基本的方案。

然后经分析可以用发布订阅模式实现:

const createStore = (reducer) => {
    let state;
    //listeners用来存储所有的监听函数
    let listeners = []
    const getState = () => state;
    const display = (action) => {
        state = reducer(state, action);
        //每一次状态更新后，都需要调用listeners数组中的每一个监听函数
        listeners.forEach(listener => listener());
    }
    const subscribe = (listener) => {
        //subscribe可能会被调用多次，每一次调用时，都将相关的监听函数存入listeners数组中
        listeners.push(listener);
        //返回一个函数，进行取消订阅
        return () => {
            listeners = listeners.filter(item => item !== listener);
        }
    }
    return {
        getState,
        dispatch,
        subscribe
    }
}