redux createAsyncThunk

Redux Toolkit 提供了一个便捷的方式来创建异步操作（`createAsyncThunk`），它结合了 Redux Thunk 动作与 async/await 语法，使得在 Redux 中处理异步操作变得更加直观。`createAsyncThunk` 是为了简化基于 Promise 的 Redux Actions 的创建过程。

当你想执行一个需要等待服务器响应的操作时，可以使用 `createAsyncThunk`。这里是一个简单的示例[^1]：

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

// 命名为 fetchTodos 的异步 thunk action
const fetchTodos = createAsyncThunk('todos/fetchTodos', async () => {
  const response = await fetch('https://api.example.com/todos');
  if (!response.ok) {
    throw new Error(`Failed to fetch todos. Response code: ${response.status}`);
  }
  return await response.json();
});

export default fetchTodos;

这个动作创建了一个返回 Promise 的函数，当调用 `dispatch(fetchTodos())` 时，它会发送一个请求并返回服务器的响应。在 reducer 中，你可以处理这些异步操作的状态变化：

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

const todosSlice = createSlice({
  name: 'todos',
  initialState: { loading: false, data: [], error: null },
  reducers: {},
  extraReducers: builder => {
    builder.addCase(fetchTodos.pending, (state) => {
      state.loading = true;
    });
    builder.addCase(fetchTodos.fulfilled, (state, action) => {
      state.data = action.payload;
      state.loading = false;
    });
    builder.addCase(fetchTodos.rejected, (state, action) => {
      state.error = action.error.message;
      state.loading = false;
    });
  },
});

export default todosSlice.reducer;

通过这种方式，`createAsyncThunk`使异步操作更易于管理，同时保持了Redux的单一状态来源原则。