react redux toolkit异步函数

React Redux Toolkit 提供了一个名为 `createAsyncThunk` 的工具函数来处理异步操作，它可以帮助我们更轻松地编写异步逻辑。

`createAsyncThunk` 的使用非常简单，我们只需要传入两个参数：一个字符串类型的 action 名称和一个异步函数。例如：

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

export const fetchUserById = createAsyncThunk(
  'users/fetchByIdStatus',
  async (userId, thunkAPI) => {
    const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
    return response.json();
  }
);

在这个例子中，我们创建了一个名为 `fetchUserById` 的异步 action，它会发起一个网络请求，然后将返回的数据作为 payload 返回。

当我们调用 `fetchUserById` 时，Redux Toolkit 会自动创建三个 action：`fetchUserById/pending`、`fetchUserById/fulfilled` 和 `fetchUserById/rejected`。这些 action 会根据异步操作的状态分别被触发，我们可以在 reducer 中处理它们。

例如，我们可以在 reducer 中处理 `fetchUserById/pending` action，将 `loading` 状态设置为 `true`：

import { createSlice } from '@reduxjs/toolkit';
import { fetchUserById } from './actions';

const userSlice = createSlice({
  name: 'user',
  initialState: {
    loading: false,
    user: null,
    error: null,
  },
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(fetchUserById.pending, (state) => {
      state.loading = true;
    });
    builder.addCase(fetchUserById.fulfilled, (state, action) => {
      state.loading = false;
      state.user = action.payload;
    });
    builder.addCase(fetchUserById.rejected, (state, action) => {
      state.loading = false;
      state.error = action.error.message;
    });
  },
});

export default userSlice.reducer;

在这个例子中，我们在 `extraReducers` 中处理了三个 action，并根据它们的状态更新了 state。当 `fetchUserById/pending` 被触发时，我们将 `loading` 状态设置为 `true`；当 `fetchUserById/fulfilled` 被触发时，我们将 `loading` 状态设置为 `false`，并将返回的数据保存到 state 中；当 `fetchUserById/rejected` 被触发时，我们将 `loading` 状态设置为 `false`，并将错误信息保存到 state 中。

需要注意的是，`createAsyncThunk` 返回的是一个 Redux action creator，我们可以像普通的 action creator 一样调用它，并且将返回的 action 传递给 `dispatch` 函数来触发异步操作。例如：

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

function User(props) {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchUserById(1));
  }, [dispatch]);

  return <div>User Component</div>;
}

在这个例子中，我们使用 `useDispatch` 钩子获取 `dispatch` 函数，并在 `useEffect` 中调用 `fetchUserById` 来触发异步操作。注意，我们传递的参数是 `1`，这是我们要获取的用户的 ID。当异步操作完成时，Redux Toolkit 会自动触发相应的 action，并将返回的数据保存到 state 中，我们可以在组件中使用 `useSelector` 钩子来获取 state 中的数据。