通过redux-toolkit在React中处理具有依赖关系的action-creato

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

// 创建一个异步的action
export const fetchUser = createAsyncThunk(
  'user/fetchUser',
  async (_, thunkAPI) => {
    const response = await fetch('https://api.example.com/user');
    return response.json();
  }
);

// 创建一个slice
const userSlice = createSlice({
  name: 'user',
  initialState: { data: null, loading: false, error: null },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUser.pending, (state) => {
        state.loading = true;
      })
      .addCase(fetchUser.fulfilled, (state, action) => {
        state.loading = false;
        state.data = action.payload;
      })
      .addCase(fetchUser.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message;
      });
  },
});

// 导出reducer和action
export const { reducer: userReducer } = userSlice;
export const { fetchUser } = userSlice.actions;