【react】---手动封装一个简易版的redux---【韶华】

export let createStore = (reducer)=>{
    //定义默认的state
    let state;

    //定义默认的action
    let actionTypes = "@@redux/INIT"+Math.random();
    let initAction = {type:actionTypes}

    //将所以需要监听的函数放在这个里面
    let listeners = []

    //定义getState函数
    let getState = ()=>state;

    //定义事件订阅函数
    let subscribe = (cb)=>{
        listeners.push(cb);
    }

    //定义事件派发函数 用来调用action
    let dispatch = (action=initAction)=>{

        //调用reducer获取新的state
        state = reducer(state,action);

        //遍历所以需要监听的函数
        listeners.map((cb)=>{
            cb();
        })

    }
    dispatch();

    return {
        getState,
        dispatch,
        subscribe
    }
}

原文地址:https://www.cnblogs.com/nanianqiming/p/10480758.html

时间: 2024-10-08 11:58:57

【react】---手动封装一个简易版的redux---【韶华】的相关文章

手动实现一个简易版 tomcat(yet)

https://mp.weixin.qq.com/s?__biz=MzA5MzcxNjY4Ng==&mid=2648107477&idx=1&sn=237afdcd8dc67f3a36aac8a38fcaada9&chksm=887be074bf0c69627659d3f076420ba7d477bc08405437eafe4d99ed22e6d2f9a53c80a73d87&mpshare=1&scene=1&srcid=0606qoAMsGtii

依赖注入[4]: 创建一个简易版的DI框架[上篇]

本系列文章旨在剖析.NET Core的依赖注入框架的实现原理,到目前为止我们通过三篇文章(<控制反转>.<基于IoC的设计模式>和< 依赖注入模式>)从纯理论的角度对依赖注入进行了深入论述,为了让读者朋友能够更好地理解.NET Core的依赖注入框架的设计思想和实现原理,我们创建了一个简易版本的DI框架,也就是我们在前面文章中多次提及的Cat.我们会上下两篇来介绍这个被称为为Cat的DI框架,上篇介绍编程模型,下篇关注设计实现.[源代码从这里下载] 目录一.DI容器的层

依赖注入[5]: 创建一个简易版的DI框架[下篇]

为了让读者朋友们能够对.NET Core DI框架的实现原理具有一个深刻而认识,我们采用与之类似的设计构架了一个名为Cat的DI框架.在<依赖注入[4]: 创建一个简易版的DI框架[上篇]>中我们介绍了Cat的基本编程模式,接下来我们就来聊聊Cat的设计和实现. 目录一.服务注册:ServiceRegistry 二.DI容器:Cat 三.扩展方法 一.服务注册:ServiceRegistry 由于作为DI容器的Cat对象总是利用预先添加到服务注册来提供对应的服务实例,所以服务注册至关重要.如下

[js高手之路]javascript腾讯面试题学习封装一个简易的异步队列

这道js的面试题,是这样的,页面上有一个按钮,一个ul,点击按钮的时候,每隔1秒钟向ul的后面追加一个li, 一共追加10个,li的内容从0开始技术( 0, 1, 2, ....9 ),首先我们用闭包封装一个创建li元素的函数. 1 var create = (function(){ 2 var count = 0; 3 return function(){ 4 var oLi = document.createElement( "li" ); 5 oLi.innerHTML = co

一个简易版的Function.prototype.bind实现

重新看<JavaScript设计模式与开发实践>一书,第32页发现个简易版的Function.prototype.bind实现,非常容易理解,记录在这了. Function.prototype.bind = function (context) { var self = this; return function () { return self.apply(context, arguments); }; }; var obj = { name: 'sven' }; var func = fu

实现一个简易版webpack

现实 webpack 的打包产物 大概长这样(只把核心代码留下来): 实现一个简版的webpack 依葫芦画瓢,实现思路分2步: 1. 分析入口文件,把所有的依赖找出来(包括所有后代的依赖) 2. 拼接出类似上面的立即执行函数 找依赖 const fs = require('fs'); const path = require('path'); const parser = require('@babel/parser'); const traverse = require('@babel/tr

手写一个简易版Tomcat

前言 Tomcat Write MyTomcat Tomcat是非常流行的Web Server,它还是一个满足Servlet规范的容器.那么想一想,Tomcat和我们的Web应用是什么关系? 从感性上来说,我们一般需要把Web应用打成WAR包部署到Tomcat中,在我们的Web应用中,我们要指明URL被哪个类的哪个方法所处理(不论是原始的Servlet开发,还是现在流行的Spring MVC都必须指明). 由于我们的Web应用是运行在Tomcat中,那么显然,请求必定是先到达Tomcat的.To

Redux入门之实现一个迷你版的Redux

Redux是一种数据架构模式,它可以用来管理应用的状态. 之前一直在做Angular的项目,没有使用到过Redux,对于Redux的使用场景和原理都不是很清楚,看资料时作者自己实现了一个Redux,在这里记录一下,加深对Redux原理的理解. 一.基本原理 首先,我们要明白的是: 状态的改变一定是有原因的,这个原因的表现叫作action. 有了action之后,状态不可能自己就改变,需要我们去操作它,这个操作就是reducer函数. 操作状态需要2个条件,之前的状态和触发操作的action,这个

时间转成x时x分x秒的封装(简易版)

function createTime(t) { let timer; if (t <= 0 || !t || t < 60 || typeof(t)!=='number') timer = "default"; if (t >= 3600) timer = "hours"; if (t < 3600 && t >= 60) timer = "minutnes"; const defaul = ()