专栏首页flytam之深入前端技术栈redux源码解读(一)自实现简易redux

redux源码解读(一)自实现简易redux

redux的源码解读(一)

首先是自己实现的简易版的redux。主要是对着API按照自己的思路实现了一遍的初版,没有任何的异常处理

function createStore(reducer, initialState) {
    let currentState = initialState,
        listeners = [];
    function getState() {
        //返回当前的state
        return currentState;
    }
    function dispatch(action) {
        let prestate = currentState;
        currentState = reducer(prestate, action);
        listeners.forEach((item) => item());
    }
    function subscribe(callback) {
        //返回值是取消订阅
        let hasUnsubscribe = false;
        listeners.push(callback);
        return function unsubscribe() {
            if (!hasUnsubscribe) {
                let index = listeners.indexOf(callback);
                listeners = listeners.splice(index, 1);
            }
        }
    }
    function replaceReducer(newReducer) {
        reducer = newReducer;
    }
    return {getState, dispatch, subscribe, replaceReducer}
}

function testReducer(state = {sum:0}, action) {
    switch (action.type) {
        case 'ADD':
            return {
                ...state,
                sum: state.sum + 1
            }
        case 'DEC':
            return {
                ...state,
                sum: state.sum - 1
            }
        default:
            return state;
    }
}
const store = createStore(testReducer);
//测试
console.log('begin',store.getState());//begin undefined
store.subscribe(() => console.log('触发了action',store.getState()));
store.dispatch({type:'ADD'});//触发了action {sum: 1}
console.log('end',store.getState());//end {sum: 1}

这样的话是有问题的,就是我们不去dispatch的时候,初始的state是undefined的,显然不符合redux的API的要求。在redux API中,我们的初始state可以是从reducer或者从createStore中传入的。然而我们的代码中没从createStore中传入state的话在没有dispatch任何东西之前state是undefined的(从上面的log信息)。。。所以,创建store实例的时候自己先dispatch一次。从redux的源码中可以看到初始化的时候dispatch({ type: ActionTypes.INIT })。这个ActionTypes.INIT是一个随机数。我们做出一点修改即可。

function createStore(reducer, initialState) {
    let currentState = initialState,
        listeners = [];
        dispatch('initial');//初始化的时候dispatch下
    function getState() {
        //返回当前的state
        return currentState;
    }
    function dispatch(action) {
        let prestate = currentState;
        currentState = reducer(prestate, action);
        listeners.forEach((item) => item());
    }
    function subscribe(callback) {
        //返回值是取消订阅
        let hasUnsubscribe = false;
        listeners.push(callback);
        return function unsubscribe() {
            if (!hasUnsubscribe) {
                let index = listeners.indexOf(callback);
                listeners = listeners.splice(index, 1);
            }
        }
    }
    function replaceReducer(newReducer) {
        reducer = newReducer;
    }
    return {getState, dispatch, subscribe, replaceReducer}
}

function testReducer(state = {sum:0}, action) {
    switch (action.type) {
        case 'ADD':
            return {
                ...state,
                sum: state.sum + 1
            }
        case 'DEC':
            return {
                ...state,
                sum: state.sum - 1
            }
        default:
            return state;
    }
}
const store = createStore(testReducer);
console.log('begin',store.getState());
store.subscribe(() => console.log('触发了action',store.getState()));
store.dispatch({type:'ADD'});
console.log('end',store.getState());

至此我们的简易版redux的createStore就实现了。当然我们没有做任何的异常处理hhh。后面就进行其它部分的探讨,

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • redux源码分析(三) 源码部分

    源码结构: - /utils/ - actionTypes.js - isPlainObject.js 判断是否是简单对象 ...

    flytam
  • 牛客剑指offer算法

    flytam
  • 两道笔试面试题目

    1、实现类似如下效果 Human(“Tam”) // log Tam .sleep(1000)// wait 1000 log sleep 1000 .s...

    flytam
  • 滴滴背后的大数据应用

    前言:这是一篇大数据应用文章,不涉及高深技术,适合大数据入门的同学了解大数据能干什么,所有数据/消息全部来源公开网络。 先聊个最近的消息,近年来发展最快的公司滴...

    大数据和云计算技术
  • 性能调优攻略

    关于性能优化这是一个比较大的话题,在《由12306.cn谈谈网站性能技术》中我从业务和设计上说过一些可用的技术以及那些技术的优缺点,今天,想从一些技术细节上谈...

    小小科
  • 域名jieyan.top花落擎格集团

    第六届亚太健康呼吸博览会(简称:呼博会)于2017年11月28日在上海光大会展中心举行。业内著名企业擎格集团宣布将启用jieyan.top和quitsmokin...

    躲在树上的域小名
  • C# 7.0 观察者模式 以及 delegate 和 event

    观察者模式 这里面综合了几本书的资料. 需求 有这么个项目:  ? 需求是这样的: 一个气象站, 有三个传感器(温度, 湿度, 气压), 有一个WeatherD...

    solenovex
  • WebService_02_WebService和Servlet的区别

    Servlet是Java Servlet的简称,称为小服务程序或服务连接器,用Java编写的服务器端程序,主要功能在于交互式地浏览和修改数据,生成动态Web...

    Learning_斌
  • 从售卖实干家到共赢组织者,社交重构零售格局

    “进入寒冬”的零售业在2016年发生了许多大事,最瞩目的莫过于新零售理念的全面兴起,以两个事件为代表:马云于G20峰会抛出、于云栖互联网大会阐释“新零售”概念;...

    曾响铃
  • .NET Core 观察者模式 以及 delegate 和 event

    一个气象站, 有三个传感器(温度, 湿度, 气压), 有一个WeatherData对象, 它能从气象站获得这三个数据. 还有三种设备, 可以按要求展示气象站的最...

    solenovex

扫码关注云+社区

领取腾讯云代金券