Redux 异步数据流-- thunk中间件源码解析

Thunk 引入背景

这是一个关于Redux异步数据流的故事。引入thunk中间件的完整故事在Redux官方中文文档异步数据流。一句话总结就是：原生Redux只支持同步数据流，所以需要引入中间件(middleware) Thnuk 来支持异步数据流。这里有两个关键字：中间件和异步。

Thunk 是什么

A thunk is a function that wraps an expression to delay its evaluation.

// calculation of 1 + 2 is immediate
// x === 3
let x = 1 + 2;// calculation of 1 + 2 is delayed
// foo can be called later to perform the calculation
// foo is a thunk!
let foo = () => 1 + 2;

用Thunk传递的Action有什么特征

An action creator that returns a function to perform asynchronous dispatch.
An action creator that returns a function to perform conditional dispatch.

function incrementIfOdd() {return (dispatch, getState) => {const { counter } = getState();if (counter % 2 === 0) {return;}dispatch(increment());};
}

Thunk 怎么用

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
const storeWithMiddleware = createStore(rootReducer,applyMiddleware(thunk)
);function makeASandwichWithSecretSauce(forPerson) {return function (dispatch) {return fetchSecretSauce().then(........);};
}// Thunk middleware lets me dispatch thunk async actions
// as if they were actions!
storeWithMiddleware.dispatch(makeASandwichWithSecretSauce('Me')
);

以上只是一个简单的总结，具体可以参考github上Thunk 官方文档

接下来步入正题：

Redux Thunk 源码

function createThunkMiddleware(extraArgument) {return ({ dispatch, getState }) => next => action => {if (typeof action === 'function') {return action(dispatch, getState, extraArgument);}return next(action);};
}const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;export default thunk;

我没有漏掉，就是这么短！撇开Redux，单从代码上来看似乎很简单，thunk就是一个嵌套函数。但又感觉啥也没看，还是不知道thunk是干啥的。。。。

我们先假设extraArgument为空，这样可以把问题简单化。

我在看这段源码时想了一下为啥感觉看了像没看一样，总结出了三个待回答的问题：

1. dispatch, getState 哪儿来的？
2. next干啥的？
3.为啥会有这种操作：action(dispatch, getState, extraArgument);

注：action作为一个用户自己根据业务逻辑自己编写的异步函数也不可能用redux中的dispatch和getState作参数呀。

dispatch, getState 哪儿来的？
next干啥的？

我在文章的开头用红色标注过，thunk的本质是中间件(middleware)，所以要了解它必须放在Redux applyMiddleware这个大前提下，这样就迎刃而解了。

之前我写过一篇文章：理解Redux底层原理从applyMiddleware开始

首先，thunk是中间件，它的定义符合中间件函数的格式：

// 中间件大致定义格式
middlwware = store => next => action => {.....let result = next(action).....return result;
}

下图是applyMiddleware的部分源码：

从图中我认为可以回答前两个问题，我就不多说了。

action(dispatch, getState, extraArgument)

首先，涉及到应用到thunk的action creator的合法写法：

let thunkActionCreator = () => (param1, param2) => {....param1({actionType: value});.....
}
//注意：此时的dispatch其实已经包裹了引入的middleware的逻辑
//dispatch= fn1Middle(fn2Middle(store.dispatch))storeWithMiddleware.dispatch(thunkActionCreator()
);

从thunk的源码中可以看到，dispatch和getState方法分别赋给了param1 和param2(函数作用域链)。

Redux 异步数据流-- thunk中间件源码解析相关推荐

multiparty 中间件源码解析
写这篇文章的起因是我在尝试使用 Node 的原生模块去接收表单上传的数据并分割过滤表单文件与数据时,由于一开始是对可写流拼接 buffer 转的字符串进行轮询,导致只能接收文件格式为 txt 的文本文 ...
Android之异步消息处理机制Handler源码解析
转载请标明出处: http://blog.csdn.net/hai_qing_xu_kong/article/details/76083113 本文出自:[顾林海的博客] 个人开发的微信小程序,目前功 ...
Redux异步解决方案之Redux-Thunk原理及源码解析
前段时间,我们写了一篇Redux源码分析的文章,也分析了跟React连接的库React-Redux的源码实现.但是在Redux的生态中还有一个很重要的部分没有涉及到,那就是Redux的异步解决方案.本 ...
redux 思考以及源码解析
1. 基本概念 redux有以下几个基本概念: 1.1. action action: 是一个对象,对一个行为的基本描述 {type:'add',todo } 1.2 action creator 一 ...
Koa2和Redux中间件源码研究
一.Koa2中间件源码分析在Koa2中,中间件被存放在一个数组中. 使用koa中,最常见的就是app.use(fn),use函数部分源码如下所示.首先中间件必须是个函数.若是generator函数, ...
Gin源码解析和例子——中间件（middleware）
在<Gin源码解析和例子--路由>一文中,我们已经初识中间件.本文将继续探讨这个技术.(转载请指明出于breaksoftware的csdn博客) Gin的中间件,本质是一个匿名回调函数.这 ...
Redux 源码解析系列(一) -- Redux的实现思想
文章来源: IMweb前端社区黄qiong(imweb.io) IMweb团队正在招聘啦,简历发至jayccchen@tencent.com Redux 其实是用来帮我们管理状态的一个框架,它暴露给 ...
Spring5源码 - 12 Spring事件监听机制_异步事件监听应用及源码解析
文章目录 Pre 实现原理应用配置类 Event事件事件监听 EventListener 发布事件 publishEvent 源码解析 (反推) Spring默认的事件广播器 SimpleApp ...
.Net Core 中间件之主机地址过滤(HostFiltering)源码解析
一.介绍主机地址过滤中间件相当于一个白名单,标记哪些主机地址能访问接口. 二.使用新建WebAPI项目,修改Startup中的代码段如下所示.下面表示允许主机名为"localhost&q ...

Redux 异步数据流-- thunk中间件源码解析

Redux 异步数据流-- thunk中间件源码解析相关推荐

最新文章

热门文章