AG Grid服务端模型集成Redux Toolkit Query时外部参数更新问题

尝试将AG Grid服务端模型与Redux Toolkit Query集成时，遇到外部参数（param1/param2）更新后，getRows方法无法获取最新值的问题。当前已启用分页、筛选和排序功能，担心直接覆盖数据源会丢失这些配置。示例代码如下：

function MyGrid({ param1, param2 }: props): ReactElement {
    // param1/param2会在此处更新
    const [triggerPostData] = usePostDataMutation();

    const createDatasource: () => IServerSideDatasource = useCallback(() => {
        return {
            getRows: (parameters): void => {
                // 此处无法获取更新后的param1/param2
                triggerPostData({ param1, param2, rowsRequestData: parameters.request })
                    .unwrap()
                    .then((data) => {
                        parameters.success({
                            rowData: data.results,
                            rowCount: data.resultCount
                        });
                        return parameters;
                    })
                    .catch(() => {
                        parameters.fail();
                    });
            }
        };
    }, [param1, param2, triggerPostData]);

    const onGridReady = useCallback(
        (parameters: GridReadyEvent): void => {
            parameters.api.setServerSideDatasource(createDatasource());
        },
        [createDatasource]
    );

    const agGridProperties: AgGridReactProps = {
        columnDefs,
        rowModelType: 'serverSide',
        cacheBlockSize: paginationPageSize,
        onGridReady
    };

    return <AgGridReact {...agGridProperties} />;
}

核心问题 #

AG Grid的服务端数据源实例一旦通过setServerSideDatasource设置后，其内部的getRows函数会捕获创建时的闭包变量。当外部param1/param2更新时，旧的数据源实例依然持有旧的参数值，而直接重新设置数据源会清除AG Grid已缓存的分页、筛选和排序状态。

解决方法 #

方法一：用React Ref保存最新参数，避免频繁重建数据源 #

通过React的useRef实时更新并存储最新的param值，让getRows直接访问ref.current获取最新参数，无需每次参数变化都重建数据源，也不会丢失现有配置。

修改后的代码：

function MyGrid({ param1, param2 }: props): ReactElement {
    const [triggerPostData] = usePostDataMutation();
    // 用ref保存最新的参数值
    const paramsRef = useRef({ param1, param2 });

    // 监听参数变化，更新ref
    useEffect(() => {
        paramsRef.current = { param1, param2 };
    }, [param1, param2]);

    const createDatasource: () => IServerSideDatasource = useCallback(() => {
        return {
            getRows: (parameters): void => {
                // 从ref中获取最新的参数
                const { param1, param2 } = paramsRef.current;
                triggerPostData({ param1, param2, rowsRequestData: parameters.request })
                    .unwrap()
                    .then((data) => {
                        parameters.success({
                            rowData: data.results,
                            rowCount: data.resultCount
                        });
                    })
                    .catch(() => {
                        parameters.fail();
                    });
            }
        };
    }, [triggerPostData]); // 不再依赖param1/param2

    const onGridReady = useCallback(
        (parameters: GridReadyEvent): void => {
            parameters.api.setServerSideDatasource(createDatasource());
        },
        [createDatasource]
    );

    const agGridProperties: AgGridReactProps = {
        columnDefs,
        rowModelType: 'serverSide',
        cacheBlockSize: paginationPageSize,
        onGridReady
    };

    return <AgGridReact {...agGridProperties} />;
}

方法二：参数更新时刷新AG Grid缓存（保留现有配置） #

如果需要在参数变化时触发数据刷新，可以调用AG Grid的refreshServerSideStore方法，该方法会保留当前的分页、筛选和排序状态，同时重新触发getRows请求，结合方法一的ref就能拿到最新参数。

添加参数变化时的刷新逻辑：

function MyGrid({ param1, param2 }: props): ReactElement {
    const [triggerPostData] = usePostDataMutation();
    const paramsRef = useRef({ param1, param2 });
    const gridApiRef = useRef<GridApi | null>(null); // 保存grid实例

    useEffect(() => {
        paramsRef.current = { param1, param2 };
        // 参数变化时，刷新服务端存储，保留现有分页筛选状态
        if (gridApiRef.current) {
            gridApiRef.current.refreshServerSideStore({ purge: false });
        }
    }, [param1, param2]);

    const createDatasource: () => IServerSideDatasource = useCallback(() => {
        return {
            getRows: (parameters): void => {
                const { param1, param2 } = paramsRef.current;
                triggerPostData({ param1, param2, rowsRequestData: parameters.request })
                    .unwrap()
                    .then((data) => {
                        parameters.success({
                            rowData: data.results,
                            rowCount: data.resultCount
                        });
                    })
                    .catch(() => {
                        parameters.fail();
                    });
            }
        };
    }, [triggerPostData]);

    const onGridReady = useCallback(
        (parameters: GridReadyEvent): void => {
            gridApiRef.current = parameters.api;
            parameters.api.setServerSideDatasource(createDatasource());
        },
        [createDatasource]
    );

    const agGridProperties: AgGridReactProps = {
        columnDefs,
        rowModelType: 'serverSide',
        cacheBlockSize: paginationPageSize,
        onGridReady
    };

    return <AgGridReact {...agGridProperties} />;
}

说明 #

• 方法一解决了getRows获取最新参数的问题，同时避免频繁重建数据源导致的状态丢失。
• 方法二在参数变化时主动触发数据刷新，适合需要参数变化后立即更新表格数据的场景，purge: false确保保留现有分页、筛选和排序配置。

内容的提问来源于stack exchange，提问作者sherkal