redux toolkit异步获取数据

Redux Toolkit 的异步数据获取可以通过 createAsyncThunk 函数来实现，它可以方便地定义异步的 action creator，并使用 Redux 的中间件进行处理。您可以通过以下代码来实现异步获取数据：

import { createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';

export const fetchUserData = createAsyncThunk(
  'user/fetchUserData',
  async (userId, thunkAPI) => {
    const response = await axios.get(`/api/users/${userId}`);
    return response.data;
  }
);

在上面的代码中，我们定义了一个名为 fetchUserData 的异步 action creator，它将通过 axios 库获取用户数据。我们可以在组件中使用该 action creator 来触发异步数据获取：

import { useDispatch } from 'react-redux';
import { fetchUserData } from './userSlice';

function User({ userId }) {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchUserData(userId));
  }, [dispatch, userId]);

  // ...
}

当我们在组件中触发 fetchUserData action 时，Redux Toolkit 会自动为我们处理异步的状态管理，包括 pending、fulfilled 和 rejected 等状态。