Redux Thunk如何实现

Question

我使用Redux作为我的react应用程序，我觉得Thunk的工作方式令人印象深刻。例如：

export const doubleAsync = () => {
  // Thunk will automatically inject "dispatch" object here
  return (dispatch, getState) => {
    return new Promise((resolve) => {
      setTimeout(() => {
        dispatch({
          type    : COUNTER_DOUBLE_ASYNC,
          payload : getState().counter
        })
        resolve()
      }, 200)
    })
  }
};

我印象深刻，因为为什么只有为redux设置一行中间件Thunk，Redux可以在调用上述方法时自动创建调度对象。

Answer 1

要了解redux中间件是如何工作的，您可以阅读下面的doc：http://redux.js.org/docs/advanced/Middleware.html

假设我们有这样的redux存储初始化(来自http://redux.js.org/docs/advanced/Middleware.html)：

​

import { createStore, combineReducers, applyMiddleware } from 'redux'

let todoApp = combineReducers(reducers)
let store = createStore(
  todoApp,
  applyMiddleware(thunkMiddleware)
)

​

applyMiddleware有一个天真的实现(来自http://redux.js.org/docs/advanced/Middleware.html)：

​

// Warning: Naïve implementation!
// That's *not* Redux API.

function applyMiddleware(store, middlewares) {
  middlewares = middlewares.slice()
  middlewares.reverse()

  let dispatch = store.dispatch
  middlewares.forEach(middleware =>
    dispatch = middleware(store)(dispatch)
  )

  return Object.assign({}, store, { dispatch })
}

​

这不是redux中的版本，而是一般理解的版本。而且，在redux中它本身没有store参数。

正如您所看到的，主要思想是，在每次操作时，中间件都接收具有dispatch和getState属性的对象。

thunkMiddleware本身非常简单。有一个比源中的版本更简单的版本：

​

let thunkMiddleware = ({ dispatch, getState }) => next => action => {
  if (typeof action === 'function') {
    return action(dispatch, getState);
  }

  return next(action);
}

​

对于typeof action === 'function'，它使用dispatch和getState参数运行这个action，这些参数稍后可以用于发送块中的其他操作。它是如何工作的。