Redux 中 Thunk 的概念

Redux Thunk 是一个用于处理 Redux 异步动作的中间件。在 Redux 中，所有的状态更新都需要通过纯函数（reducer）来完成，这些纯函数接收当前的状态和一个动作（action），然后返回新的状态。然而，有时候我们需要执行一些异步操作，例如从服务器获取数据，或者延迟状态更新等。在这种情况下，我们可以使用 Redux Thunk 来处理这些异步动作。

Thunk 是一个函数，它接收一个参数（通常是一个函数或动作），并返回一个新的函数。这个新的函数可以在需要的时候调用原始的函数，并且可以传递额外的参数。在 Redux Thunk 中，这个额外的参数就是 Redux store 的方法，如 dispatch 和 getState。

使用 Redux Thunk 的一个典型场景是在发起异步请求时。例如，我们可能需要从服务器获取数据，然后将这些数据保存到 Redux store 中。在这种情况下，我们可以创建一个 Thunk 动作，这个动作会返回一个函数，这个函数会发起异步请求，并在请求完成后更新 Redux store 的状态。

下面是一个简单的例子，展示了如何使用 Redux Thunk 来处理异步动作：

首先，我们需要安装 redux-thunk 中间件：

npm install redux-thunk

然后，我们可以创建一个 Redux store，并使用 redux-thunk 中间件：

import {
    createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

接下来，我们可以创建一个 Thunk 动作。这个动作会发起一个异步请求，并在请求完成后更新 Redux store 的状态：

import axios from 'axios';

export const fetchData = () => {
   
  return async (dispatch) => {
   
    try {
   
      const response = await axios.get('/api/data');
      dispatch({
   
        type: 'FETCH_DATA_SUCCESS',
        payload: response.data
      });
    } catch (error) {
   
      dispatch({
   
        type: 'FETCH_DATA_FAILURE',
        payload: error.message
      });
    }
  };
};

在上面的代码中，我们首先导入了 axios 库，用于发起异步请求。然后，我们定义了一个名为 fetchData 的 Thunk 动作。这个动作返回一个函数，这个函数接收一个 dispatch 参数。在这个函数中，我们使用 axios 发起一个异步请求，并在请求完成后使用 dispatch 方法更新 Redux store 的状态。

最后，我们可以在组件中调用这个 Thunk 动作：

import React from 'react';
import {
    useDispatch } from 'react-redux';
import {
    fetchData } from './actions';

const MyComponent = () => {
   
  const dispatch = useDispatch();

  const handleClick = () => {
   
    dispatch(fetchData());
  };

  return (
    <button onClick={
   handleClick}>获取数据</button>
  );
};

在上面的代码中，我们首先导入了 React、useDispatch 和 fetchData。然后，我们定义了一个名为 MyComponent 的组件。这个组件中有一个名为 handleClick 的方法，这个方法会在按钮被点击时调用。在这个方法中，我们使用 dispatch 方法调用 fetchData Thunk 动作。

总之，Redux Thunk 是一个用于处理 Redux 异步动作的中间件。通过使用 Redux Thunk，我们可以在 Redux 中发起异步请求，并在请求完成后更新 Redux store 的状态。这让我们可以将异步逻辑与 Redux 同步逻辑分离开来，使得代码更加清晰和易于维护。