Redux-Thunk源码阅读

发表于 更新于 本文字数： 4.6k 阅读时长 ≈ 8 分钟
本文是作者对Redux-Thunk源码阅读的介绍，包括Redux-Thunk源码阅读的优势、实现细节、相关资料等，这些步骤可以帮助作者提高Redux-Thunk源码阅读的效率。

redux-thunk是redux解决异步的中间件。

举个例子，我们需要fetchUser拿到用户信息，然后存到redux中。如果没有thunk，我们需要在组件中fetchUser.then，然后dispatch一个action存到redux中，假如这个操作有多处需要，那么fetchUser.then这个就需要重复，存在一定的代码重复。thunk加入的话，我们可以把fetchUser.then(dispatch action)整体作为一个action进行复用。因为thunk改写了dispatchAPI，我们还是dispatch去用而已，但是已经不是个pure action了。

thunk引入

先看下项目中如何配置thunk。

1
2
3

const middleWares = [sagaMiddleware, thunk, routerMiddleware(history)];
const store = createStore(rootReducer(history), compose(applyMiddleware(...middleWares), reduxDevtools));

项目结构

知道了thunk的作用及使用方法，可以开始看thunk源码了。

仓库地址:戳这里

可以看出，thunk项目非常小，主程序文件只有一个src/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
├── .babelrc 		   
├── .editorconfig  
├── .eslintrc 
├── .gitignore
├── .travis.yml 	
├── CONTRIBUTING.md
├── LICENSE.md
├── README.md
├── package-lock.json
├── package.json
├── src
│   ├── index.d.ts	
│   └── index.js  
├── test
│   ├── .eslintrc
│   ├── index.js
│   ├── tsconfig.json
│   └── typescript.ts
└── webpack.config.babel.js

通过目录树，可以Get到以下信息

  1. babel作为项目编译器
  2. editorConfig控制编辑器风格
  3. eslint控制代码风格
  4. git作为版本管理
  5. travis作为CI构建工具
  6. 使用npm，而非yarn作为包管理器
  7. 源码仍然使用JS来写，增加了TS定义文件，来确保TS项目下的类型安全
  8. thunk打包支持commonJS,ES,UMD
  9. thunk虽然代码不多，但也有UT，使用的chai

上述基础信息若有不足，实属吃惊，自行谷歌。

thunk是补充和拓展了redux的一些功能。要理解thunk的源码，需要看下redux的部分源码，这样可以理解两者是如何衔接的。

Redux源码

redux源码已采用TS进行编写

这里贴出部分相关Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
export default function applyMiddleware(
  ...middlewares: Middleware[]
): StoreEnhancer<any> {
  return (createStore: StoreCreator) => <S, A extends AnyAction>(
    reducer: Reducer<S, A>,
    ...args: any[]
  ) => {
    const store = createStore(reducer, ...args)
    let dispatch: Dispatch = () => {
      throw new Error(
        'Dispatching while constructing your middleware is not allowed. ' +
          'Other middleware would not be applied to this dispatch.'
      )
    }

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

    return {
      ...store,
      dispatch
    }
  }
}

compose操作是什么？看下对应的实现，注意注释，这是一个组合函数，从右向左依次执行。

compose属于JS函数式编程范畴，有疑问，可以戳这里

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/**
 * Composes single-argument functions from right to left. The rightmost
 * function can take multiple arguments as it provides the signature for the
 * resulting composite function.
 *
 * @param funcs The functions to compose.
 * @returns A function obtained by composing the argument functions from right
 *   to left. For example, `compose(f, g, h)` is identical to doing
 *   `(...args) => f(g(h(...args)))`.
 */
export default function compose(...funcs: Function[]) {
  if (funcs.length === 0) {
    // infer the argument type so it is usable in inference down the line
    return <T>(arg: T) => arg
  }

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

  return funcs.reduce((a, b) => (...args: any) => a(b(...args)))
}

注意到上面的middlewares=>chain=> dispatch=>return，thunk作为中间件最终返回作为enhancer,传入createStore函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
export default function createStore<
  S,
  A extends Action,
  Ext = {},
  StateExt = never
>(
  reducer: Reducer<S, A>,
  preloadedState?: PreloadedState<S> | StoreEnhancer<Ext, StateExt>,
  enhancer?: StoreEnhancer<Ext, StateExt>
): Store<ExtendState<S, StateExt>, A, StateExt, Ext> & Ext {

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

    return enhancer(createStore)(reducer, preloadedState as PreloadedState<
      S
    >) as Store<ExtendState<S, StateExt>, A, StateExt, Ext> & Ext
  }

...
}

enhancer会执行，接下来执行返回的函数。当配置了thunk作为中间件时，thunk就是这里面的chain。接下来看下thunk

thunk源码

只有短短12行

redux-thunk

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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;

返回的是个柯里化函数，可以看出，如果传入的参数是函数，就执行函数，否则就跟以前一样dispatch(plainObject)

redux-saga与redux-thunk的不同

这里聊到了redux-thunk,就也提一下另一个中间件方案 redux-saga.

redux-saga也是redux中间件，一开始举例子fetchUser然后存储到redux，如果用saga也可以实现。so对于单个项目，这两者是可以彼此替代的。但两者还是有不同。

thunk是将action改造成了函数，我们还是正常的dispatch来触发整个操作，而saga并不改变action,而是监听action,发起指定的action,就按顺序执行一系列操作。所以两者还是有根本性不同。

目前我参与的项目，已经弃用了thunk，而使用redux-saga

写在最后

  1. 单站在使用角度，saga更为灵活，开发及测试的维护性都会更高些。但并不是说thunk就不好。假如项目足够的简单，数据流转逻辑简单清晰，thunk足够。但假如，存储到redux的数据依赖多个请求，并且逻辑复杂，如果使用thunk，不免会陷入回调地狱，这时saga就可以让代码变得清晰可维护。
  2. thunk源码足够简单轻巧，一句话来说就是改写redux的dispatch API，使得可以变成函数，从而我们可以dispatch一个异步方法。
  3. 看看源码，确实有助于提升自己的基础，另外也知道了与这些作者的差距，so,继续加油。

参考文档