Question

我使用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可以在调用上述方法时自动创建调度对象。

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'，它会使用action和dispatch参数运行此getState，稍后可以使用这些参数来调度其他操作。这就是thunk的工作方式。

Redux Thunk如何实现

1 个答案: