react 2024 07 04

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
import { RootState } from '../store';

// 定义用户数据的接口
interface User {
id: number;
name: string;
sex: string;
address?: string; // 可选字段
job?: string; // 可选字段
}

// 创建 API 服务
export const api = createApi({
reducerPath: 'api',
baseQuery: fetchBaseQuery({ baseUrl: 'https://your-api-endpoint.com' }),
endpoints: (builder) => ({
getUsers: builder.query<User[], void>({
query: () => 'users',
}),
}),
});

// 导出 hooks 用于组件使用
export const { useGetUsersQuery } = api;

import { configureStore } from '@reduxjs/toolkit';
import { setupListeners } from '@reduxjs/toolkit/query';
import { api } from './services/api';

// 配置 Redux store
export const store = configureStore({
reducer: {
[api.reducerPath]: api.reducer,
},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(api.middleware),
});

// 定义 RootState 类型
export type RootState = ReturnType;

// 设置监听器
setupListeners(store.dispatch);

import React, { useMemo } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
import { useGetUsersQuery } from '../services/api';
import { RootState } from '../store';

const MyAgGridTable: React.FC = () => {
const { data, error, isLoading } = useGetUsersQuery();

// 使用 useMemo 处理数据，防止不必要的重新计算
const rowData = useMemo(() => {
if (!data) return [];
return data.map((item) => ({
id: item.id.toString().slice(0, 2),
name: item.name.slice(0, 2),
sex: item.sex.slice(0, 2),
}));
}, [data]);

// 定义列配置
const columnDefs = [
{ field: 'id', headerName: 'ID' },
{ field: 'name', headerName: 'Name' },
{ field: 'sex', headerName: 'Sex' },
];

if (isLoading) return

Loading...

;
if (error) return

Error loading data

;

return (
<div className="ag-theme-alpine" style={{ height: 400, width: '100%' }}>


);
};

export default MyAgGridTable;

`import React from 'react';
import { Provider } from 'react-redux';
import { store } from './store';
import MyAgGridTable from './components/MyAgGridTable';

const App: React.FC = () => {
return (

AG Grid with Redux and API Data

);
};

export default App;`