浅析`redux-thunk`中间件源码

wing324 发布于2019-08-21 17:17 / 1363人阅读

摘要：大多的初学者都会使用中间件来处理异步请求，其理解简单使用方便具体使用可参考官方文档。源码的源码非常简洁，出去空格一共只有行，这行中如果不算上则只有行。官方文档中的一节讲解的非常好，也确实帮我理解了中间件的工作原理，非常推荐阅读。

总觉得文章也应该是有生命力的，欢迎关注我的Github上的博客，这里的文章会依据我本人的见识，逐步更新。

大多redux的初学者都会使用redux-thunk中间件来处理异步请求，其理解简单使用方便（具体使用可参考官方文档）。我自己其实也一直在用，最近偶然发现其源码只有一个函数，考虑到其在Github上至今有6747个赞，因此比较好奇它究竟给出了一个怎么样的函数。

什么是thunk?

在看具体的源码之前，我们先看一个词thunk,理解这个词有助于我们理解源码。

A thunk is a function that wraps an expression to delay its evaluation.
维基百科中是这样解释thunk的: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的源码非常简洁，出去空格一共只有11行，这11行中如果不算上},则只有8行。最后三行模块的导出方法很好理解，

// thunk的内容如下
({ dispatch, getState }) => next => action => {
    if (typeof action === "function") {
      return action(dispatch, getState, extraArgument);
    }
    return next(action);
  }

// thunk.withExtraArgument的结果如下
function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => action => {
    if (typeof action === "function") {
      return action(dispatch, getState, extraArgument);
    }
    return next(action);
  };
}

thunk.withExtraArgument允许给返回的函数传入额外的参数，它比较难理解的部分和thunk一样，如下：

({ dispatch, getState }) => next => action => {
    if (typeof action === "function") {
      return action(dispatch, getState, extraArgument);
    }
    return next(action);
  }

上述代码使用函数参数的解构加上连用三个箭头函数，显得非常简洁，单同时也带来了理解的困难（这也是箭头函数的缺点之一）。把上述代码在babel REPL中转译为ES5语法后，我们看到以下结果：

"use strict";

function createThunkMiddleware(extraArgument) {
  return function (_ref) {
    var dispatch = _ref.dispatch,
        getState = _ref.getState;
    return function (next) {
      return function (action) {
        if (typeof action === "function") {
          return action(dispatch, getState, extraArgument);
        }
        return next();
      };
    };
  };
}

这下，代码一下子我们能看懂了，不过稍等这里的dispatch,getState，next还有action又是什么？

我们先看看，在reudx中我们如何使用中间件：

let store = createStore(
    reducer,
    applyMiddleware(thunk)
);

看来，要解开dispatch,getState,next,action从哪里来，我们还需要再看看applyMiddleware的源码，如下：

export default function applyMiddleware(...middlewares) {
  return (createStore) => (...args) => {
    const store = createStore(...args)
    let dispatch = store.dispatch
    let chain = []

    const middlewareAPI = {
      getState: store.getState,
      dispatch: (...args) => dispatch(...args)
    }
    chain = middlewares.map(middleware => middleware(middlewareAPI))
    dispatch = compose(...chain)(store.dispatch)

    return {
      ...store,
      dispatch
    }
  }
}

可以看出其中middleware执行时传入的参数对象middlewareAPI中确实包含getState和dispatch两项，next则来自dispatch = compose(...chain)(store.dispatch)这一句中的store.dispatch,而action在dispatch某个action时传入。

一般来说一个有效携带数据的action是如下这样的：

{
  type: ADD_TODO,
  text: "Build my first Redux app"
}

加入redux-thunk后，action可以是函数了，依据redux-thunk的源码，我们可以看出如果传入的action是函数，则返回这个函数的调用，如果本身传入的函数是一个异步函数，我们完全可以在函数调用结束后，获取必要的数据再次触发dispatch由此实现异步效果。

小结

redux-thunk的源码总的来说还是很简单的，理解这个函数本身并不难，但是在彻底弄懂每一项却需要对reudx的部分源码有所了解。react官方文档中的Middleware一节讲解的非常好，也确实帮我理解了中间件的工作原理，非常推荐阅读。之前一直使用redux-thunk做异步处理，这段时间尝试了一下redux-saga，它非常优雅，可用于处理更加复杂的异步action，之后有时间会再总结一下它的用法，如果可以，也愿意再分析下它的源码，欢迎关注。

相关链接

本文在Github上的链接

idc机房托管专线服务源码浅析 cdn浅析 jdbc连接mysql数据库的方法浅析中间件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89347.html

【源码解析】redux-thunk

摘要：的返回值是函数，这个函数经调用，传入参数，之后会在中间件链上进行传递，只要保证每个中间件的参数是并且将传递给下一个中间件。了解了Redux原理之后，我很好奇Redux中间件是怎么运作的，于是选了最常用的redux-thunk进行源码分析。此次分析用的redux-thunk源码版本是2.2.0，redux源码版本是3.7.2。并且需要了解Redux原理 redux中间件都是由redu...

simpleapples 2019-08-21 17:10 评论0 收藏0
redux中间件探秘

摘要：接下来我们来看看源码中的模块是怎么应用中间件的。如何实现中间件操作的。新的会从第一个中间件开始触发，这样，在我们调用的时候，就会将中间件走一遍了。函数如果存在多个中间件，直接使用方法将各个中间件嵌套起来。从redux-thunk引出思考在使用redux-thunk进行异步action书写的时候，我经常好奇redux到底如何运作，让asyncAction成为可能为了探究，我们必须看...

Jeff 2019-08-20 18:26 评论0 收藏0
redux深入进阶

摘要：上一篇文章讲解了如何使用，本篇文章将进一步深入，从的源码入手，深入学习的中间件机制。的功能是让支持异步，让我们可以在中跟服务器进行交互等操作，而他的实现。。。上一篇文章讲解了redux如何使用，本篇文章将进一步深入，从redux的源码入手，深入学习redux的中间件机制。在这里我们会以一个redux-thunk中间件为例，逐步分解redux的中间机制如何操作，如何执行。闲话不多说，...

omgdog 2019-08-19 17:51 评论0 收藏0
精益 React 学习指南（Lean React）- 3.4 掌控 redux 异步

摘要：举例来说一个异步的请求场景，可以如下实现任何异步的逻辑都可以，如等等也可以使用的和。实际上在中，一个就是一个函数。书籍完整目录 3.4 redux 异步 showImg(https://segmentfault.com/img/bVyou8); 在大多数的前端业务场景中，需要和后端产生异步交互，在本节中，将详细讲解 redux 中的异步方案以及一些异步第三方组件，内容有： redu...

JouyPub 2019-08-19 18:36 评论0 收藏0
简单梳理Redux的源码与运行机制

摘要：然后循环调用中的更新函数，更新函数一般是我们的渲染函数，函数内部会调用来获取数据，所以页面会更新。前言前几天写了一篇react另一个状态管理工具Unstated的源码解析。开启了我的看源码之路。想一想用了好长时间的redux，但从没有深究过原理，遇到报错更是懵逼，所以就啃了一遍它的源码，写了这篇文章，分享我对于它的理解。 API概览看一下redux源码的index.js，看到了我们最...

刘东 2019-05-21 16:12 评论0 收藏0