react-thunk中间件的简单理解

前言

刚来公司的时候，对react项目中的thunk中间件的作用一直不太了解，最近有时间决定好好研究一下。鉴于本人初次写博客，并已假设读者已掌握redux的一些基本用法；如有错误，还望指出。不胜感激！

首先简单回顾一下redux工作流程

对于reactUI组件来说，数据的来源无外乎两种，一种是用户主动触发的动作，例如点击事件、提交表单，输入操作；另一种是组件主动的数据更新，如获取页面初始数据，子组件接受父组件的props变化而进行更新视图操作；
如图所示,无论那种对于数据的操作，对于view都会派发出一个action

状态的更新

正如我们所知，在redux里，每次更新后的Store都会对应着一个新的view，而Store里面数据的更新依赖action的触发————Store.dispatch(action)会自执行初始化中createStore中注入的reducers，从而计算出新的状态。

import { createStore } from 'redux'
//reducer 计算状态的纯函数
//initialState 初始化数据
//enhancers中间件
createStore(reducers, initialState, enhancers)

action的使用和插件的扩展

对于组件的输入操作（如点击事件），可以将store.dispatch(action)绑定到组件

 const store = createStore(reducer);
 const TodoList = ({ state, someActionCreator }) => (
        <ul>
        {state.map(someState =>
           <Todo
               key={someState.someData}
               onClick={() => store.dispatch(someActionCreator(state.someData))}
             />
        </ul>
        )

或者通过connect方法，从组件的props中拿到dispatch方法，发出一个action

  //  将state注入到组件的props里
  //  注意，这里的state指的是redux管理的数据，每一个view的状态对应着
  //   唯一的state;
  //   state的集合就是redux管理的store
const mapStateToProps = store => ({
          state: store.state
})
​
 //  将action注入到组件的props 里
const mapDispatchToProps = dispatch => ({
  actions: state => dispatch(actionCreators(state))
})
​
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

然后组件绑定事件就可以改成这样 ，（ actionCreators用于生成action, 参考官方链接 https://redux.js.org/basics/actions）

 const TodoList = ({ state, actions }) => (
    `<ul>
        {state.map(someState =>
           <Todo
               key={someState.someData}
               onClick={() => actions(someState.someData)}
         />
        </ul>`
        )

那么问题来了，dispatch是同步执行reducers生成新状态的，对于页面的操作没有问题；但是如果点击事件是请求了某个结果，需要等待结果响应后再更新视图呢？应该如何处理？

因而redux引入了thunk中间件，对action进行了扩展

thunk中间件解决了什么问题？

引入thunk插件后，我们可以在actionCreators内部编写逻辑，处理请求结果。而不只是单纯的返回一个action对象。

//未引入前的写法
let nextTodoId = 0
export const addTodo = text => ({
     type: 'ADD_TODO',
     id: nextTodoId++,
     text
 })
 
 
 //引入thunk后
 let nextTodoId = 0
 export const addTodo = text => ({
     return async dispatch => {
     //dosomething, request
      await request()
      dispatch({
         type: 'ADD_TODO',
         id: nextTodoId++,
         text
        })
     }
 })

thunk中间件的使用方法

import { applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk';

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

createStore其实可以接受三个参数，第二个参数preloadedState一般作为整个应用的初始化数据，如果传入了这个参数，applyMiddleware就会被当做第三个参数处理

const store = createStore(
  reducer,
  initialState,
  applyMiddleware(thunk)
);

中间件都要放到applyMiddleware里，如果要添加中间件，可以依次添加，但是要遵循文档定义的顺序

const store = createStore(
  reducer,
  initialState,
  applyMiddleware(thunk，middleware1, middleware2)
);

源码解读

也许你会奇怪，为什么使用的时候要按照上面的写法，那我们就一起看下方法的实现

首先是createStore的参数顺序

function createStore(reducer, preloadedState, enhancer) {
  var _ref2;

  if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
    enhancer = preloadedState;
    preloadedState = undefined;
  }

  if (typeof enhancer !== 'undefined') {
    if (typeof enhancer !== 'function') {
      throw new Error('Expected the enhancer to be a function.');
    }

    return enhancer(createStore)(reducer, preloadedState);
  }

  if (typeof reducer !== 'function') {
    throw new Error('Expected the reducer to be a function.');
  }

第一个判断已经告诉了我们答案，参数的类型检验结果决定了顺序

applyMiddleware是干什么用的

function applyMiddleware() {
  for (var _len = arguments.length, middlewares = Array(_len), _key = 0; _key < _len; _key++) {
    middlewares[_key] = arguments[_key];
  }

  return function (createStore) {
    return function () {
      for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
        args[_key2] = arguments[_key2];
      }

      var store = createStore.apply(undefined, args);
      var _dispatch = function dispatch() {
        throw new Error('Dispatching while constructing your middleware is not allowed. ' + 'Other middleware would not be applied to this dispatch.');
      };

      var middlewareAPI = {
        getState: store.getState,
        dispatch: function dispatch() {
          return _dispatch.apply(undefined, arguments);
        }
      };
      var chain = middlewares.map(function (middleware) {
        return middleware(middlewareAPI);
      });
      _dispatch = compose.apply(undefined, chain)(store.dispatch);

      return _extends({}, store, {
        dispatch: _dispatch
      });
    };
  };
}

代码不多，而且非常清晰：
1、applyMiddleware顾名思义，用于调用各种中间件；
2、applyMiddleware执行后，将所有入参中间件存入一个数组，并且返回一个闭包（闭包的概念不做累述）
3、闭包接受一个createStore作为入参并且执行后返回下一个闭包，createStore这个入参有没有很眼熟，没错，就是redux的createStore。

返回结果
返回将所有中间件串联存入的dispatch，执行时从右向左执行，第一次的执行结果会返回给一下个，依次类推。

如何实现每个中间件串联执行
_dispatch = compose.apply(undefined, chain)，使用了一个compose函数，调用之后就可以将所有中间件串联起来，那么compose又是如何实现的呢？

精华所在

function compose() {
  for (var _len = arguments.length, funcs = Array(_len), _key = 0; _key < _len; _key++) {
    funcs[_key] = arguments[_key];
  }

  if (funcs.length === 0) {
    return function (arg) {
      return arg;
    };
  }

  if (funcs.length === 1) {
    return funcs[0];
  }

  return funcs.reduce(function (a, b) {
    return function () {
      return a(b.apply(undefined, arguments));
    };
  });
}

个人认为这个compose函数是整个redux中非常亮眼的部分，短短几行代码，就完成了一个核心功能的扩展，是责任链设计模式的经典体现。

ALSO 我们也可以使用这个compose方法对applyMiddleware进行扩展

let devtools = () => noop => {
          console.log(noop);
          return noop;   //createStore
      };
const enhancers = [
    applyMiddleware(...middleware),
    devtools()
  ];
createStore(reducers, initialState, compose(...enhancers));

然后回来，我们就明白了createStore中的设计

//如果存在中间件参数，那么将会得到一个经过改装的dispatch
// return _extends({}, store, {dispatch: _dispatch});
if (typeof enhancer !== 'undefined') {
    if (typeof enhancer !== 'function') {
      throw new Error('Expected the enhancer to be a function.');
    }

    return enhancer(createStore)(reducer, preloadedState);
  }

dispatch经过了怎样的改装
如上已经说过，compose会将传入的函数数组从右向左串联执行

compose.apply(undefined, chain)(store.dispatch);

thunk一定会接受上一个中间件的执行结果继续执行，然后最终在createState里返回一个改造好的dispatch, 接下来我只要看下thunk是怎样实现的，就了解了整个中间件使用的原理：

function createThunkMiddleware(extraArgument) {
  return function (_ref) {
    var dispatch = _ref.dispatch,
        getState = _ref.getState;
    return function (next) {
            //最终的dispatch
            //next就是接收的store.dispatch参数,为上一个中间件改造过的dispatch
      return function (action) {
        if (typeof action === 'function') {
          return action(dispatch, getState, extraArgument);
        }

        return next(action);
      };
    };
  };
}

var thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;

export default thunk;

代码同样精炼，改造后的dispatch入参接受的数据类型:
1、非function,不处理，将action 传给下一个中间件，最终都会根据传入的action计算相应的reducers(开头说的自执行)————store.dispatch(action)
2、function类型的action, 自动触发函数，并且将store.dispatch传入

总结

再结合开始介绍的thunk用法，我们就明白了thunk的原理，可以在actionCreators里通过返回一个函数，然后就可以在函数里编写某些异步操作了，待异步操作结束，最后通过传入的store.dispatch，发出action通知给Store要进行状态更新。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,293评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,604评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,958评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,729评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,719评论 5赞 366
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,630评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,000评论 3赞 397
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,665评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,909评论 1赞 299
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,646评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,726评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,400评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,986评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,959评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,996评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,481评论 2赞 342