React Hooks + Redux Toolkit + Antd 实战：构建高效可维护的后台管理系统

src/
├── api/                # API 请求定义
│   └── user.js
├── assets/             # 静态资源
├── components/         # 通用 UI 组件（无状态或仅依赖 props）
├── hooks/              # 自定义 Hooks
│   ├── useAuth.js
│   └── useTable.js
├── pages/              # 页面级组件（路由入口）
│   ├── Dashboard/
│   └── UserManage/
├── store/              # Redux 相关
│   ├── index.js        # 配置 store
│   ├── rootReducer.js
│   └── slices/         # 按模块划分 slice
│       ├── userSlice.js
│       └── appSlice.js
├── utils/              # 工具函数
├── constants/          # 常量
└── App.js

// store/slices/userSlice.js
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import { fetchUserList } from '@/api/user';

// 异步 thunk
export const getUsers = createAsyncThunk(
  'user/getUsers',
  async (params, { rejectWithValue }) => {
    try {
      const response = await fetchUserList(params);
      return response.data;
    } catch (err) {
      return rejectWithValue(err.response.data);
    }
  }
);

const userSlice = createSlice({
  name: 'user',
  initialState: {
    list: [],
    loading: false,
    error: null,
    pagination: { current: 1, pageSize: 10, total: 0 },
  },
  reducers: {
    // 同步 reducer，例如重置搜索条件
    resetSearch: (state) => {
      state.pagination.current = 1;
      state.pagination.total = 0;
    },
  },
  extraReducers: (builder) => {
    builder
      .addCase(getUsers.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(getUsers.fulfilled, (state, action) => {
        state.loading = false;
        state.list = action.payload.records;
        state.pagination.total = action.payload.total;
      })
      .addCase(getUsers.rejected, (state, action) => {
        state.loading = false;
        state.error = action.payload || '请求失败';
      });
  },
});

export const { resetSearch } = userSlice.actions;
export default userSlice.reducer;

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

const userAdapter = createEntityAdapter({
  selectId: (user) => user.id,
  sortComparer: (a, b) => a.name.localeCompare(b.name),
});

const initialState = userAdapter.getInitialState({
  loading: false,
  error: null,
});

// 在 extraReducers 中调用 userAdapter 的方法
builder.addCase(getUsers.fulfilled, (state, action) => {
  userAdapter.setAll(state, action.payload);
});

import { useSelector, shallowEqual } from 'react-redux';

// 只选取需要的数据，避免整个对象
const { list, loading } = useSelector(
  (state) => ({
    list: state.user.list,
    loading: state.user.loading,
  }),
  shallowEqual // 浅比较
);

// store/index.ts
import { useDispatch, useSelector, TypedUseSelectorHook } from 'react-redux';
import { AppDispatch, RootState } from './store';

export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

// hooks/useTable.js
import { useCallback, useEffect } from 'react';
import { useAppDispatch, useAppSelector } from '@/store';
import { getUsers, resetSearch } from '@/store/slices/userSlice';

export const useUserTable = () => {
  const dispatch = useAppDispatch();
  const { list, loading, pagination } = useAppSelector(
    (state) => state.user,
    shallowEqual
  );

  const fetchData = useCallback((params = {}) => {
    dispatch(getUsers({ ...pagination, ...params }));
  }, [dispatch, pagination]);

  const handleTableChange = (pagination) => {
    dispatch(getUsers({ page: pagination.current, pageSize: pagination.pageSize }));
  };

  const reset = useCallback(() => {
    dispatch(resetSearch());
  }, [dispatch]);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  return { list, loading, pagination, handleTableChange, reset, fetchData };
};

const UserList = () => {
  const { list, loading, pagination, handleTableChange } = useUserTable();
  return (
    <Table
      dataSource={list}
      loading={loading}
      pagination={pagination}
      onChange={handleTableChange}
      // columns...
    />
  );
};

const SearchForm = () => {
  const [form] = Form.useForm();
  const dispatch = useAppDispatch();

  const onFinish = (values) => {
    dispatch(updateSearchParams(values)); // 更新 Redux 中的搜索条件
    dispatch(getUsers(values));           // 触发数据请求
  };

  return (
    <Form form={form} onFinish={onFinish}>
      {/* Form items */}
      <Button htmlType="submit">搜索</Button>
    </Form>
  );
};

const appSlice = createSlice({
  name: 'app',
  initialState: {
    modal: { visible: false, type: 'confirm', data: null },
    notification: null,
  },
  reducers: {
    showModal: (state, action) => {
      state.modal = { ...state.modal, ...action.payload, visible: true };
    },
    hideModal: (state) => {
      state.modal.visible = false;
    },
  },
});

export const getUsers = createAsyncThunk(
  'user/getUsers',
  async (params, { dispatch, rejectWithValue }) => {
    try {
      const res = await api.getUsers(params);
      return res.data;
    } catch (error) {
      // 显示全局错误通知
      dispatch(showNotification({ type: 'error', message: error.message }));
      return rejectWithValue(error.message);
    }
  }
);

export const getUsers = createAsyncThunk(
  'user/getUsers',
  async (params, { getState, rejectWithValue }) => {
    const { user } = getState();
    if (user.loading) return; // 防重复请求
    // ...
  }
);

import { getUsers } from './userSlice';
import mockStore from 'redux-mock-store';
import thunk from 'redux-thunk';

const middlewares = [thunk];
const store = mockStore(middlewares)({});

test('getUsers fulfilled', async () => {
  await store.dispatch(getUsers({ page: 1 }));
  const actions = store.getActions();
  expect(actions[0].type).toBe(getUsers.pending.type);
  // 模拟 API 成功...
});