【Redux】自己动手实现redux-thunk

1. 前言

        在原始的redux里面,action必须是plain object,且必须是同步。而我们经常使用到定时器,网络请求等异步操作,而redux-thunk就是为了解决异步动作的问题而出现的。

2. redux-thunk中间件实现源码
function createThunkMiddleware(extra) {return ({ dispatch, getState}) => next => action => {if(typeof action === 'function') {return action(dispatch, getState, extra);}return next(action);        }
}
const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;
export default thunk;
2.1 此处dispatch = compose(...chain)(store.dispatch)
  • action(dispatch)中的这个dispatch可能并不是store.dispatch
  • action(dispatch)执行后,如果action函数体使用dispatch({...}),动作{...}也会层层传递下去,直到传递给store.dispatch({...})
  • 举个例子,比如说dispatch= f(g(h(store.dispatch)))),那么action(dispatch)函数体中执行到dispatch({...}),动作传递过程是: f(g(h(store.dispatch)))({...}) -> g(h(store.dispatch))({...}) -> h(store.dispatch)({...}) -> store.dispatch({...})
2.2 此处next的对应关系

        继续举个例子,比如说dispatch = f(g(h(store.dispatch))))

  • 如果当前中间件指向f,则next对应g(h(store.dispatch))
  • 如果当前中间件指向g,则next对应h(store.dispatch)
  • 如果当前中间件指向h,则next对应store.dispatch(真实的dispatch)
3. redux中applyMiddleware方法源码
export const applyMiddleware = (...middlewares) => {return createStore => (reducer, preloadedState) => {const store = createStore(reducer, preloadedState);let dispatch = () => {throw new Error('xxxx');};const middlewareAPI = {getState: store.getState,dispatch: (action, ...args) => dispatch(action, ...args)};const chain = middlewares.map(middleware => middleware(middlewareAPI));dispatch = compose(...chain)(store.dispatch);return {...store,dispatch}}
};export const compose = (...funcs) => {if(funcs.length === 0) {return arg => arg;}if(funcs.length === 1) {return funcs[0];}return funcs.reduce((prev, cur) => {return (...args) => {prev(cur(...args));} });
}
4. redux中createStore增加第3个参数
export const createStore = (reducer, preloadedState, enhancer) => {// 初始化statelet state = preloadedState;// 保存监听函数const listeners = [];// 返回store当前保存的stateconst getState = () => state;// 通过subscribe传入监听函数const subscribe = (listener) => {listeners.push(listener);}// 执行dispatch,通过reducer计算新的状态state// 并执行所有监听函数const dispatch = (action) => {state = reducer(state, action);for(const listener of listeners) {listener();}}!state && dispatch({});if(enhancer) {return enhancer(createStore)(reducer, preloadedState);}return {getState,dispatch,subscribe,}
}

注:以上,如有不合理之处,还请帮忙指出,大家一起交流学习~  

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/596793.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Python机器学习】k近邻——k近邻分类

k-NN算法最简单的版本是只考虑一个最近邻,也就是想要预测的数据点最近的训练数据点,预测结果就是这个训练数据点的已知输出。 除了仅考虑最近邻,还可以考虑任意(k个)邻居,这也是k近邻算法名字的由来。在考…

1、docker常用技巧:docker数据位置更改

目录 🍅点击这里查看所有博文 随着自己工作的进行,接触到的技术栈也越来越多。给我一个很直观的感受就是,某一项技术/经验在刚开始接触的时候都记得很清楚。往往过了几个月都会忘记的差不多了,只有经常会用到的东西才有可能真正记…

【React】03-关于React state(状态) 的实践

背景 在学习React组件的过程中,发现state的运用很广泛,但对于它的使用及运行机制还是比较模凌两可的,故找了一些资料学习一下。 实践 React中的组件类型被分为了两类:函数组件,又被称为无状态组件;类组件…

1*2*3+3*4*5+...+99*100*101python,1加到100的程序算法python

大家好,本文将围绕python中123一直加到100程序怎么写展开说明,计算123456...100的值python是一个很多人都想弄明白的事情,想搞清楚计算1-23-45 … -100的值python需要先了解以下几个事情。 今天下午上python课的时候,老师留了一个…

python基础教程二(列表相关知识)

列表 列表定义及其相关内置函数 列表类似一个可以改变的数组,里边的类型不同于c,c要求类型必须相同,列表的元素任意类型都可以,最重要的是列表可以改变,和元组和字符串最大区别 list函数:将别的序列元素变…

佳能G3800彩色喷墨多功能一体打印机报5B00错误代码处理方法

5B00错误代码的含义 5B00错误代码是指佳能G3800打印机的“废墨仓已满”。这个废墨仓是打印机内部的一个部件,主要用于收集打印过程中产生的废墨。当废墨仓已满时,打印机就会报5B00错误代码。 佳能G3800彩色喷墨多功能一体打印机报5B00错误代码处理办法 …

大数据 MapReduce是什么?

在Hadoop问世之前,其实已经有了分布式计算,只是那个时候的分布式计算都是专用的系统,只能专门处理某一类计算,比如进行大规模数据的排序。 很显然,这样的系统无法复用到其他的大数据计算场景,每一种应用都…

大数据技术与应用开发赛项笔记

各种启动命令 修改mysql数据库编码:alter database shtd_result CHARACTER SET utf8; hadoop : start-all.sh hive服务: hive --service metastore hive 客户端 :hive dolphinscheduler服务:./bin/dolphinscheduler-daemon.sh sta…

【算法刷题】## 算法题目第1讲:双指针处理数组题目 带视频讲解

算法题目第一讲:双指针处理数组题目 解决力扣: [344. 反转字符串][167. 两数之和 II - 输入有序数组][26. 删除有序数组中的重复项][27. 移除元素][283. 移动零][5. 最长回文子串] 配合b站视频讲解食用更佳:https://www.bilibili.com/video/BV1vW4y1P…

傻傻”的JAVA编译器

故事是从一个问题开始的:为什么 Java 中 2 * (i * i) 比 2 * i * i更快? 猛地一看,我还以为有人在钓鱼,这俩玩意不应该是一模一样吗?第二反应是计算结果溢出了int值所以导致了这个差异,于是我掏出JMH这个利…

什么是系统设计 – 学习系统设计

系统设计被定义为为系统的不同组件、接口和模块创建架构并提供有助于在系统中实现这些元素的相应数据的过程。系统设计是任何分布式系统设计背后的核心概念。 系统设计涉及识别数据源,它是描述、创建和规划框架以满足特定业务的必要性和先决条件的直觉。 为什么要…

excel公式名称管理器

1.问题 在日常使用excel的时候,发布一个表格文件,需要限制表格的某列或某行只能从我们提供的选项中选择,自己随便填写视为无效,如下图所示,上午的行程安排只能从"在岗"、"出差"、"病假"…

java面试汇总

JVM内存模型与Java线程内存模型的区别 JVM内存模型描述的是Java虚拟机在执行Java程序时如何管理和使用内存,主体围绕:方法区(Method Area)、堆(Heap)、程序计数器(Program Counter Register&am…

AI绘图模型不会写字的难题解决了

介绍 大家好,最近有个开源项目比较有意思,解决了图像中不支持带有中文的问题。 https://github.com/tyxsspa/AnyText。 为什么不能带有中文? 数据集局限 Stable Diffusion的训练数据集以英文数据为主,没有大量包含其他语言文本的…

LeetCode-141环形链表 LeetCode-142环形链表二

一、前言 本篇文章在我之前讲完的链表、链表与递归的基础上进行讲解,本次我们以leetcode为例,讲解链表的其他题型,今天我们先了解一下环形链表,这里我们以leetCode141和leetCode142为例。 二、LeetCode141 首先关于这道题&#…

微服务注册中心之Eureka

微服务注册中心之Eureka eureka 搭建集群 版本说明 Spring Boot 2.1.7.RELEASE spring-cloud-starter-netflix-eureka-server Finchley.SR2 spring-boot-starter-security 2.1.7.RELEASE pom.xml 文件 <?xml version"1.0" encoding"UTF-8"?> &l…

游戏缺少emp.dll详细修复教程,快速解决游戏无法启动问题

在现代游戏中&#xff0c;我们经常会遇到一些错误提示&#xff0c;其中之一就是“emp.dll丢失”。emp.dll是一个动态链接库文件&#xff0c;它包含了许多程序运行所需的函数和数据。当一个程序需要调用这些函数时&#xff0c;系统会从emp.dll文件中加载相应的内容。因此&#x…

VSCode上远程调试代码出现的问题

记录一下&#xff1a; 真的是汗流浃背了&#xff0c;师妹叫帮忙如何在VSCode上远程调试代码&#xff0c;一些自己已经经历过的问题&#xff0c;现在已经忘记了。又在网上一顿搜索&#xff0c;这次记录下吧。。。 出现以下问题&#xff1a; 1. 终端界面总是sh-4.4 $ &#xff…

【每日试题】java面试题之中间件

什么是中间件&#xff1f; 中间件是指位于客户端和服务器之间的一层软件&#xff0c;它可以提供一系列的服务&#xff0c;简化了开发和管理复杂的分布式应用系统。 中间件的分类有哪些&#xff1f; 中间件可以分为消息中间件、缓存中间件、数据访问中间件、分布式计算中间件、…

LINUX加固之命令审计

一、前言 在LINUX安全范畴中&#xff0c;安全溯源也是很重要的一个环节。对主机上所有曾操作过的命令详细信息需要有一份记录保存&#xff0c;当系统遭受破坏或者入侵&#xff0c;拿出这份记录&#xff0c;可以帮助定位一些可疑动作。 很多系统通常都会配置安全堡垒机&#xff…