第49节——redux-thunk 支持异步数据流

一、什么是redux-thunk

redux-thunk 是一个用于处理 Redux 异步 action 的中间件。它允许我们在 Redux 中编写异步的 action 创建函数（action creator），这些 action 创建函数可以返回一个函数而不是一个 action 对象。这个返回的函数可以接收 dispatch 和 getState 两个参数，并在函数体内进行异步操作后，再使用 dispatch 方法触发一个或多个普通的同步 action。

二、项目中使用

1、安装

 npm install redux-thunk

2、在createStore里使用applyMiddleware传入

// 引入thunk
import thunk from 'redux-thunk'

// 使用中间件
const store = createStore(rootReducer, applyMiddleware(thunk));

三、编写一个延迟三秒在进行赋值的action

1、创建一个actions模块

import { bindActionCreators } from "redux";
import { useDispatch } from "react-redux";
import { useMemo } from "react";
const dely = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(10);
    }, 1000);
  });
};

export const updateByAmount = (num) => {
  /**
   * 使用了thunk之后，可以直接返回一个方法
   * 该方法接收两个参数
   * 第一个是 dispatch 用来触发reducer
   * 第二个是 getState 是一个方法，用来获取state
   * 注意：这里的state是获取的所有模块的state
   */
  return async (dispatch, getState) => {
    console.log(getState())
    // 延迟1秒
    await dely();
    // 调用对应的reducer
    dispatch({
      type: "UPDATE_BY_AMOUNT",
      num,
    });
  };
};

export function useActions(actions) {
  const dispatch = useDispatch();
  return useMemo(() => {
    return bindActionCreators(actions, dispatch);
  }, [actions, dispatch]);
}

2、页面中使用

import React from "react";
import { useSelector } from "react-redux";
import { updateByAmount } from "./actions";
import { useActions } from "./useActions";

function Counter() {
  const state = useSelector((state) => state.user);
  const actions = useActions({
    updateByAmount: (amount) => updateByAmount(amount),
  });

  const add = async () => {
    actions.updateByAmount(10);
  };

  return (
    <div>
      <p>
        延迟1秒展示: {state.name} -- {state.num}
      </p>
      <button onClick={() => add()}>+</button>
    </div>
  );
}

export default Counter;

四、为什么需要使用redux-thunk

当我们在 Redux 中处理异步操作时，如果不使用中间件（比如 redux-thunk），我们需要手动编写代码来管理异步操作的状态，代码会变得复杂，难以维护。而使用 redux-thunk 可以让我们更加轻松地处理异步操作，只需要在 action 创建函数中返回一个函数，在这个函数中进行异步操作即可。redux-thunk 可以让我们在 Redux 中处理异步操作，使代码变得简单、易于维护。

五、redux-thunk的工作原理

下面是一个简化版的 redux-thunk 源码实现，用于说明 redux-thunk 的工作原理

function thunkMiddleware({ dispatch, getState }) {
  return next => action => {
    // 如果 action 是一个函数，那么调用它，并传递 dispatch 和 getState 函数作为参数
    if (typeof action === 'function') {
      return action(dispatch, getState);
    }
    // 否则，调用下一个中间件
    return next(action);
  };
}

thunkMiddleware 是一个高阶函数，它接收 { dispatch, getState } 作为参数，返回一个新函数。这个新函数是一个中间件，接收 next 和 action 两个参数，返回一个结果。

当一个 action 被派发时，这个 action 会先经过 thunkMiddleware 中间件，如果这个 action 是一个函数，那么 thunkMiddleware 就会调用这个函数，并传递 dispatch 和 getState 函数作为参数。这个函数可以进行异步操作，然后在异步操作完成后再调用 dispatch 函数派发真正的 action 对象。

如果这个 action 不是一个函数，那么 thunkMiddleware 就会调用 next 函数，将这个 action 传递给下一个中间件。

这就是 redux-thunk 的基本实现原理。通过 redux-thunk 中间件，我们可以在 action 中进行异步操作，并在异步操作完成后再派发真正的 action 对象，从而实现更加复杂的应用逻辑。