好问题！我之前在项目中刚好实现过类似的需求——用Redux作为唯一数据源，搭配ag-Grid的服务端行模型，完全是可行的，而且能很好地契合Redux的状态管理理念。下面我把具体的实现思路和步骤拆解给你：

核心是分离职责：让Redux完全接管数据的请求、状态存储（包括分页/排序/过滤参数、加载状态、返回数据集），而ag-Grid只负责触发数据需求事件、渲染数据。这样既遵守了Redux作为唯一数据源的原则，又能充分利用ag-Grid服务端行模型的按需加载能力。

1. 定义Redux状态结构 #

首先在Redux store中定义对应ag-Grid服务端数据的状态，建议包含这些字段：

const initialState = {
  // 当前页的数据集
  gridData: [],
  // 总数据条数（用于ag-Grid计算分页）
  totalRows: 0,
  // 加载状态
  loading: false,
  // 请求错误信息
  error: null,
  // 当前的分页/排序/过滤参数（可选，用于同步外部操作）
  currentRequestParams: null
};

2. 实现Redux Action与Reducer #

创建对应的action（推荐用Redux Thunk处理异步请求）和reducer，负责发起API请求、更新状态：

Action示例（用Thunk） #

export const fetchGridData = (requestParams) => async (dispatch) => {
  dispatch({ type: 'FETCH_GRID_DATA_REQUEST' });
  try {
    // 调用后端接口，传递分页、排序、过滤参数
    const response = await yourApiClient.get('/api/grid-data', { params: requestParams });
    dispatch({
      type: 'FETCH_GRID_DATA_SUCCESS',
      payload: {
        data: response.data.rows,
        totalRows: response.data.totalCount
      }
    });
  } catch (err) {
    dispatch({
      type: 'FETCH_GRID_DATA_FAILURE',
      payload: err.message
    });
  }
};

Reducer示例 #

const gridReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_GRID_DATA_REQUEST':
      return { ...state, loading: true, error: null };
    case 'FETCH_GRID_DATA_SUCCESS':
      return {
        ...state,
        loading: false,
        gridData: action.payload.data,
        totalRows: action.payload.totalRows,
        currentRequestParams: action.payload.params
      };
    case 'FETCH_GRID_DATA_FAILURE':
      return { ...state, loading: false, error: action.payload };
    default:
      return state;
  }
};

export default gridReducer;

3. 配置ag-Grid服务端行模型 #

在React组件中，通过useSelector获取Redux状态，配置ag-Grid的serverSideDatasource，让ag-Grid触发数据请求时，通过dispatch Redux action来获取数据，再将Redux中的数据回传给ag-Grid：

import { useSelector, useDispatch } from 'react-redux';
import { AgGridReact } from 'ag-grid-react';
import { fetchGridData } from './gridActions';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const ServerSideGrid = () => {
  const dispatch = useDispatch();
  const { gridData, totalRows, loading, error } = useSelector(state => state.grid);
  // 保存ag-Grid的getRows回调参数，用于数据返回后通知ag-Grid
  let getRowsParams = null;

  // 配置服务端数据源
  const serverSideDatasource = {
    getRows: (params) => {
      getRowsParams = params;
      // 将ag-Grid的请求参数转换为后端需要的格式
      const requestParams = {
        pageSize: params.request.pageSize,
        pageNumber: Math.floor(params.request.startRow / params.request.pageSize) + 1,
        sortModel: params.request.sortModel,
        filterModel: params.request.filterModel
      };
      // 触发Redux action请求数据
      dispatch(fetchGridData(requestParams));
    }
  };

  // 当Redux中的数据更新时，通知ag-Grid渲染数据
  useEffect(() => {
    if (getRowsParams && gridData) {
      getRowsParams.successCallback(gridData, totalRows);
    }
    // 请求失败时通知ag-Grid
    if (getRowsParams && error) {
      getRowsParams.failCallback();
    }
  }, [gridData, totalRows, error]);

  return (
    <div className="ag-theme-alpine" style={{ height: '600px' }}>
      <AgGridReact
        rowModelType="serverSide"
        serverSideDatasource={serverSideDatasource}
        columnDefs={[
          // 你的列定义，比如：
          { field: 'id', headerName: 'ID' },
          { field: 'name', headerName: '名称' },
          { field: 'age', headerName: '年龄' }
        ]}
        // 自定义加载/错误提示
        loadingOverlayComponent={loading ? <div>数据加载中...</div> : null}
        noRowsOverlayComponent={error ? <div>加载失败：{error}</div> : null}
      />
    </div>
  );
};

export default ServerSideGrid;

• 避免重复请求：如果ag-Grid频繁触发getRows（比如快速切换排序），可以在action中添加防抖逻辑，或者在组件中判断当前是否处于loading状态，避免重复dispatch。
• 状态同步：如果有外部操作（比如页面上的分页按钮）需要修改ag-Grid的分页/排序状态，可以通过ag-Grid的API（如api.paginationGoToPage()）同步UI状态，同时dispatch action更新Redux中的参数。
• 错误处理：确保请求失败时调用getRowsParams.failCallback()，让ag-Grid显示错误状态，提升用户体验。

完全建议！这种架构既符合Redux作为唯一数据源的设计原则，又能充分发挥ag-Grid服务端行模型的性能优势（按需加载数据，避免一次性加载大量数据）。官网的React/Redux集成指南只覆盖客户端行模型，是因为客户端行模型的数据是一次性加载的，而服务端行模型需要按需触发请求，所以需要我们自己搭建这个中间层，但这不仅是可行的，更是大型应用中的最佳实践之一。

内容的提问来源于stack exchange，提问作者Marcus Junius Brutus