redux源码系列摹写之简版redux

众所周知redux是个状态管理工具库。很多人会将其误解为react专有的状态管理工具，这样的话你就错了。事实上，redux是个完全独立的状态管理工具。可以运用于很多框架和库中，其实vue的vuex也是参考redux来实现的，只不过是强关联于vue的响应式也只适配于vue。

• 话不多说上代码：

const ADD_NUMBER = 'ADD_NUMBER';
const @@REDUX_INIT = '@@REDUX_INIT';
let initState = {number: 0,address:'shanghai'};
function reducer(state= initState, action) {
    swicth(action.type) {
        case ADD_NUMBER:
            return {
                ...state,
                number: action.payload
            }
        default:
            return state;
    }
}

funxtion createStore(reducer, initState) {
    let state = initState；
    let listeners = [];
    <!--为外部获取内部数据提供接口-->
    function getState() {
        return state;
    }
    function dispatch(action) {
        <!--reducer会根据action和state算出一个新的state并返回-->
        state = reducer(state, action);
        <!--这个监听函数的执行不依赖于任何动作，始终都要执行。-->
        listeners.forEach(listener => listener());
        return action;
    }
    <!--看过源码的都知道，在仓库创建之时就会自己先派发一个初始化的任务，给状态初始化一个默认值-->
    dispatch({type: @@REDUX_INIT});
    function subscribe(listener) {
        listeners.push(listener)
        <!--执行完订阅函数之后会返回一个取消订阅的函数，类组件在组件将要卸载的生命周期里调用，函数组件则是会在useEffect里面自动调用。达到组件销毁订阅销毁，以免导致报无故的错-->
        return function() {
            i = listeners.indexOf(listener);
            listeners.splice(i, 1)
        }
    }
    <!--创建store仓库里面虽然也有了不少方法要被外使用那么自然只能返回出去咯！-->
    return {
        getState,
        dispatch,
        subscribe
    }
}

example:
let state = {
    address: 'shanghai',
    number: 1
}

let store = createStore(reducer，state);
<!--这里可能要注意虽然之前创建store时已经派发了一个初始化动作，但是在这里我们传入的state会覆盖之前的那个初始值！-->
console.log(store.getState());