• 自己简写一个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中的状态改成什么
    }
  • 相关阅读:
    对线性回归算法的评测
    HIVE cdh5.15.1搭建
    解决Shuffle$ShuffleError: error in shuffle in fetcher错误
    启动YARN资源管理器
    linux检测活体ip并邮件提醒
    Hadoop的NameNode进入安全模式
    Java操作Hadoop-HDFS API Maven环境搭建
    Hadoop CDH版本安装和启动(CentOS7)
    基于Redis的Nginx服务器集群session共享
    基于Memcached的Nginx服务器集群session共享
  • 原文地址:https://www.cnblogs.com/chaixiaozhi/p/12215099.html
Copyright © 2020-2023  润新知