专栏首页菜鸟计划自己简写一个redux(redux源码简写)

自己简写一个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中的状态改成什么
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS基础语法(三) CSS的6种特性

    样式表常用写法及特性(组合、继承、关联性、权值性、层叠性、重要性) 1.样式的组合:把具有相同声明定义的选择符组合在一起,并用逗号隔开。-例如:段落元素p、单元...

    柴小智
  • javascript 变量、作用域和内存问题

    一、基本类型和引用类型的值   1.基本类型和引用类型的值  基本类型值:指那些保存在栈内存中的简单数据,即这种值完全保存在内存中的一个位置,他们所占据的空间大...

    柴小智
  • react入门(六):状态提升&context上下文小白速懂

    使用 react 经常会遇到几个组件需要共用状态数据的情况。这种情况下,我们最好将这部分共享的状态提升至他们最近的父组件当中进行管理。

    柴小智
  • Chrome插件开发之隐藏页面图片

    forrestlin
  • weex里Vuex state使用storage持久化

    在weex里使用Vuex作为state管理工具,问题来了,如何使得state可以持久化呢?weex官方提供store模块,因此我们可以尝试使用该模块来持久化st...

    用户1177380
  • vuejs初上手项目

    虽然vue的官方文档非常棒,在我读完文档之后还是会有一种感觉,知识点我都懂,然后呢?似乎大体知道该怎么利用vue全家桶去搭建一个项目,但具体下笔又有点模糊。vu...

    IMWeb前端团队
  • tensorflow学习笔记(三十七):如何自定义LSTM的initial state

    如何初始化LSTM的state LSTM 需要 initial state。一般情况下,我们都会使用 lstm_cell.zero_state()来获取 ini...

    ke1th
  • vuejs初上手项目

    学习一个框架有两个阶段最难,一个是初期的入门,一个是后期的源码阅读。 虽然vue的官方文档非常棒,在我读完文档之后还是会有一种感觉,知识点我都懂,然后呢?似乎大...

    IMWeb前端团队
  • 小程序云开发仿爱彼迎小程序 | 云开发实战

    目前作者只完成了主页、日期的选择及一个主题民宿页面,这附上源码地址:https://github.com/BeichenloveNancy/mpvue-airb...

    腾讯云开发TCB
  • LeetCode 957. N 天后的牢房(查找循环节)

    (请注意,由于监狱中的牢房排成一行,所以行中的第一个和最后一个房间无法有两个相邻的房间。)

    Michael阿明

扫码关注云+社区

领取腾讯云代金券