zoukankan      html  css  js  c++  java
  • 自己简写一个redux(redux源码简写)

     直接看代码

    mydux.js文件
    function createStore(reducer) {
        /**
         * 1.注册用到的方法,并return出去提供使用
         * 2.定义默认的状态与事件池
         * 3.默认先触发一次dispatch给state赋予默认值
         * 4.componentDidMount后会通过subscribe往状态池中追加事件
         * 5.在具体的事件处触发dispatch,传入具体的action,修改state的值,并且触发事件池中的事件,从而更新组件
         */
        let state,
            listeners = [];
        function dispatch(action) {
            //传入state和action,返回修改后最新的state状态值
            state = reducer(state, action);
            //通知事件事件池中的方法执行
            for (let i = 0; i<listeners.length; i++){
                let curFn = listeners[i];
                if (typeof curFn === 'function') {
                    curFn();
                    continue;
                }
                //不是函数的移除掉
                listeners[i].splice(i, 1);
                i--;
            }
        }
        //组件通过getState获取最新的状态值(此处要深拷贝一下,避免组件直接通过对象引用修改状态值,redux的源码中貌似没有深拷贝,存在一些缺陷)
        function getState() {
            return JSON.parse(JSON.stringify(state));
        }
        function subscribe(fn) {
            //此处进行一个去重复,避免添加重复的事件(redux的源码中貌似也没有去重复,存在一些缺陷)
            for (let i = 0; i<listeners.length; i++){
                if (listeners[i] === fn) {
                    return;
                }
            }
            listeners.push(fn);
            //返回一个移除事件的函数,可以进行调用,从事件池中移除追加的事件
            return function unsubscribe () {
                let index = listeners.indexOf(fn);
                if (index > -1) {
                    // listeners.splice(index, 1);  //这个地方不能用splice,可能会导致数组塌陷问题
                    listeners[index] = null;
                }
            };
        }
        //创建的时候先调用一下,为了是当默认state没值的时候,触发reducer给初始化的state赋予一个默认值
        dispatch({
            type: `@@redux/INIT${Math.random()}`
        });
        return {
            dispatch,
            getState,
            subscribe
        }
    }
    export {
        createStore
    }
    App.js文件
    import {createStore} from './redux/mydux.js'
    
    let store = createStore(reducer);
    window.store = store;
    
    function reducer(state = {
        n: 0,
        m: 0
    }, action) {
        //reducer就是根据不同的行为标识来修改状态信息的
        switch (action.type) {
            case 'support': state.n = state.n+1;break;
            case 'against': state.m = state.m+1;break;
        }
        return state;   //return的是什么,就会把store中的状态改成什么
    }
  • 相关阅读:
    HDU 1097
    HDU 1045
    HDU 1039 -Easier Done Than Said?
    HDU 1038
    HDU 1037 - Keep on Truckin'
    HDU 1036 - Average is not Fast Enough!
    hdu 1701 ACMer
    hdu 1711 Number Sequence(kmp)
    hdu 2087 剪花布条
    字符串匹配-KMP算法学习笔记
  • 原文地址:https://www.cnblogs.com/chaixiaozhi/p/12215099.html
Copyright © 2011-2022 走看看