redux-thunk源码分析：1.0.0 最简源码

redux-thunk 作为一款可以解决 redux 不能发送异步 action 的问题的中间件，到底做了些啥
更新于: 2021-12-19 12:57:28
我们为什么要用 redux-thunk
redux-thunk

划重点

明明可以用 function 组合就可以实现的功能，为什么要引入  thunk: 无需引用store实例就可以和Redux store交互；

前提是：你不用把  store 做成全局共享的，如果你有了  globalStore 这样的东西放内存中，就另当别论了。

 

其实不需要这个 redux-thunk，也可以完美处理 SSR 的问题，不需要按网上的说法人云亦云。

 

thunk 是什么

thunk 的理念我们将执行函数和回调函数分开

 

redux-thunk源码

export default function thunkMiddleware({ dispatch, getState }) {
  return next => action =>
    typeof action === 'function' ?
      action(dispatch, getState) :
      next(action);
}

// 转化为 es5 版本

为什么需要 redux-thunk 

  1. 无需引用store实例就可以和Redux store交互（比如使用dispatch和getState）
  2. thunk帮我们从组件中移除一些复杂的逻辑
  3. 从组件的角度来看，它不关心是dispatch了一个action object还是触发异步逻辑，他只关注dispatch(doSomething())然后继续往下走
  4. Thunks能够返回promises

为什么可以抛弃 redux-thunk 

为什么我可以用 globalStore 的思路，只需要在初始化的时候，或者页面切换的时候，做这个工作

实际我在项目中就是这么干的，根本就不需要用到这个库

// SSR 中大概是这样处理 globalStore 的
window.globalStore = JSON.parse(__GLOBAL_DATA__);

// 对应我们现在这种情况，其实就只需要在 initialStore 的时候做一个工作了
var ssrData = JSON.parse(__GLOBAL_DATA__);
window.globalStore = deepAssign(window.globalStore, ssrData);

// 本质上这个和 localStorage 里取数据 ，初始化页面的原理是一样的
var localData = JSON.parse(localStorage.getItem('__local_data__'));
window.globalStore = deepAssign(window.globalStore, localData);

总结一下

  1. 如果不想折腾，可以直接使用  redux-thunk 这个库，确实可以解决一些问题
  2. 如果你可以改造 redux 或者自己开发一些中间件，可以考虑不用使用这种库
  3. 如果你确定你的项目不会用到 SSR 技术，完全可以不用

参考