前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >自己简写一个redux(redux源码简写)

自己简写一个redux(redux源码简写)

作者头像
柴小智
发布2020-02-14 18:20:15
6780
发布2020-02-14 18:20:15
举报
文章被收录于专栏:菜鸟计划菜鸟计划

 直接看代码

代码语言:javascript
复制
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
}
代码语言:javascript
复制
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中的状态改成什么
}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-01-19 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档