redux-thunk 如何工作？

Question

所以我目前是 redux 的新手并停留在中间件部分。 我需要知道这两个代码如何相互作用。

我的动作创建者：

import jsonPlaceHolder from '../APis/jsonPlaceHolder';

export const fetchPosts= ()=>{

  return async (dispatch)=>{

      const response = await jsonPlaceHolder.get('/posts');

      dispatch({type:'FETCH_POSTS',payload: response});

  };

};

redux-thunk 代码：

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;

Answer 1

纯 redux 仅适用于同步操作。 Redux thunk 使您能够使用异步操作（从单个操作创建者分派多个操作，对于通常是请求/响应/错误操作的异步操作）。 中间件介于您分派动作和更新存储的 reducer 之间。 由于 redux 仅适用于普通对象，因此要使用动作创建器（如 fetchPosts），您需要一些东西（此处为 redux-thunk）。 它只是注入 dispatch 参数（如果你的动作创建者依赖它，getState 可以让你获得当前状态）。

中间件中的next(action)是将您的操作对象传播到下一个中​​间件（或者如果它是您的减速器的最后一个）的方法。 Redux-thunk 检查你调度的东西是否是一个函数（因为我们说 redux 只能处理普通对象），如果它是一个函数，它只是注入上述参数。

所以它基本上是：

dispatch(fetchPosts()) -> redux-thunk-middleware -> 它是函数，所以它用注入的 dispatch/getState 调用它（这不会传播到减速器）-> dispatch({type:'FETCH_POSTS',payload: response}) -> redux-thunk-middleware -> 不是函数，让它通过 -> reducer -> 更新状态

希望这可以帮助。