【React系列】你了解redux-thunk吗？

在了解了redux以及redux中间件的机制后，本篇文章想要聊聊在redux生态领域里十分流行的一款中间件：redux-thunk，废话不多说，开搞！

什么是redux-thunk

我们都知道，在redux体系里，如果我们想在页面dispatch一个action，那么这个action必须是个 普通对象。因为在没有使用中间件的情况下，action是直接被 reducer 捕获的，而reducer要求action必须是一个 带type字段的普通对象，所以就有了这样的使用局限

而redux-thunk则可以让我们dispatch一个 函数，从而可以更加灵活地使用action

redux的源码非常简洁：

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对于action为 function 的情况，会去 执行 这个函数action，同时传入关键参数 dispatch、getState，这样就可以让我们在无需 显示 传递state和dispatch的情况下，在我们自定义的函数action内，自由地dispatch和获取state

使用redux-thunk的好处

其实从对redux-thunk的介绍中，我们就可以知道其优势所在，这里再做下总结

• 允许我们同时dispatch 多个 action
• 允许我们在action内处理 异步逻辑
• 无需组件显示地传递dispatch和state，而是可以直接利用形参来使用

redux-thunk的不足

对于异步逻辑处理没有特别高要求的项目，redux-thunk是完全够用的，但是如果有这方面要求，那么redux-thunk是无法更精细地控制异步流程，而是只能简单地支持异步逻辑

这种需求下，redux-saga 则是更适合的一种方案，它提供了很多用于控制异步流程的api，有机会的话我会单独出一篇文章来讲解

结语

redux-thunk中的thunk，其实就是指的函数，也就说核心在于函数action的支持，从而大大提高了redux的使用灵活性，这也是它如此受欢迎的原因，而对于我们来说，重要的是领悟其中蕴含的思想，这样才可以不断将知识收入囊中，最终成为一个“富有”的人