打通 Redux 的任督二脉——Redux Thunk 源码解析

2023-09-01 07:21:28

Redux Thunk 是什么？

Redux Thunk 是 Redux 的一个中间件，它允许你在 Redux 的 dispatch 方法中返回一个函数，这个函数可以执行异步操作，并在异步操作完成后分发一个新的 action。

Thunk 中间件的作用就是将这些异步操作转换成 Redux 可以理解的 Action。

源码解析

Redux Thunk 的源码非常简单，只有 11 行代码：

const thunk = store => next => action =>
  typeof action === 'function' ?
    action(store.dispatch, store.getState) :
    next(action)

const thunk = store => next => action =>：

这行代码定义了一个函数 thunk，它接收三个参数：store、next 和 action。
- store 是 Redux 的 store 对象。
- next 是下一个中间件或 reducer。
- action 是要被分发的 action。
typeof action === 'function'：

这行代码检查 action 是否是函数。
action(store.dispatch, store.getState)：

如果 action 是函数，那么这行代码就会调用它，并将 store.dispatch 和 store.getState 作为参数传递给它。
next(action)：

如果 action 不是函数，那么这行代码就会调用 next 方法，并将 action 作为参数传递给它。

Redux Thunk 的工作原理很简单：

当你调用 dispatch(action) 时，Redux Thunk 就会检查 action 是否是函数。
如果 action 是函数，那么 Redux Thunk 就会调用它，并将 store.dispatch 和 store.getState 作为参数传递给它。
这个函数可以执行异步操作，并在异步操作完成后分发一个新的 action。
如果 action 不是函数，那么 Redux Thunk 就会调用下一个中间件或 reducer。