【react】Redux源码解析

Redux 源码

let createStore = (reducer) => {

    let state;

    //获取状态对象

    //存放所有的监听函数

    let listeners = [];

    let getState = () => state;

    let dispach = (action) => {     //提供一个方法供外部调用派发action

        state = reducer(state, action);        //调用管理员reducer得到新的state

        listeners.forEach((listener) => {

             listener()        //执行所有的监听函数

        })

    }  

    let subscribe = (listener) => {       // 订阅状态变化事件，当状态改变发生之后执行监听函数

        listeners.push(listener);

    }

    dispath();    // 初始化的调用派发action函数

    return {

        getState,

        dispath,

        subscribe

    }

}

let combineReducers = (reducers) => {

    // 传入一个reducers管理组，返回的是一个reducer

    return function(state={},action={}) {

        let newState = {};

        for(var attr in reducers) {

            newState[attr] = reducers[attr](state[attr],action)

        }

        return newState;

    }

}

export {createStore,combineReducers};

使用案例：

function createStore(reducer) {

    var state;

    var listeners = [];

    var getState = () => state;

    var dispatch = (action) => {

        state = reducer(state, action);

        listeners.forEach(lis => lis());    // 遍历执行监听函数

    }

    var subscribe = (listener) => {

        listeners.push(listener);

        return () => {

            listeners = listeners.filter((lis) => {     // 过滤掉当前的监听函数，避免重复订阅

                return lis != listener

            })

        }

    }

    dispatch();

    return {

        getState, dispatch, subscribe

    }

}

var reducer = (state = 0, action) => {     // 输入当前状态，与行为，返回新的状态

    if (!action) return state;

    console.log(action);

    switch (action.type) {

        case 'INCREMENT':

            return state + 1;

        case 'DECREMENT':

            return state - 1;

        default:

            return state;

    }

}

var store = createStore(reducer);

store.subscribe(function () {

    document.querySelector('#counter').innerHTML = store.getState();   // 订阅数据

});

document.querySelector('#addBtn').addEventListener('click', function () {

    store.dispatch({type: 'INCREMENT'});    //分发数据

});

document.querySelector('#minusBtn').addEventListener('click', function () {

    store.dispatch({type: 'DECREMENT'});    //分发数据

});