Redux Thunk 是如何实现的

Question

我正在为我的 React 应用程序使用 Redux Thunk，我对 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在调用上述方法时可以自动创建dispatch对象。

Answer 1

要了解 redux 中间件的工作原理，您可以阅读此文档：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，稍后可用于在 thunk 中调度其他操作。这就是 thunk 的工作方式。

Redux Thunk 是如何实现的

How does Redux Thunk implement

reactjs

redux

redux-thunk