使用Redux工具包进行正确的错误处理

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

// 创建一个异步Thunk来获取用户数据
export const fetchUserById = createAsyncThunk(
  'users/fetchById',
  async (userId, thunkAPI) => {
    const response = await axios.get(`https://api.example.com/users/${userId}`);
    return response.data;
  }
);

// 创建一个Slice来管理用户数据和错误状态
const usersSlice = createSlice({
  name: 'users',
  initialState: { entities: [], loading: 'idle', error: null },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUserById.pending, (state) => {
        state.loading = 'pending';
      })
      .addCase(fetchUserById.fulfilled, (state, action) => {
        state.loading = 'fulfilled';
        state.entities.push(action.payload);
      })
      .addCase(fetchUserById.rejected, (state, action) => {
        state.loading = 'rejected';
        state.error = action.error.message;
      });
  },
});

// 配置Store
const store = configureStore({
  reducer: usersSlice.reducer,
});

// 使用选择器来获取错误状态
const selectError = (state) => state.users.error;

// 在组件中使用
import { useSelector } from 'react-redux';

function UserComponent({ userId }) {
  const error = useSelector(selectError);

  useEffect(() => {
    store.dispatch(fetchUserById(userId));
  }, [userId]);

  if (error) {
    return <div>Error: {error}</div>;
  }

  // 渲染用户数据...
}

.addCase(fetchUserById.rejected, (state, action) => {
  state.loading = 'rejected';
  state.error = action.error.message || 'An unknown error occurred';
});