reactjs 带有Redux工具包的AG Grid查询?,

n3schb8v  于 2023-03-12  发布在  React
关注(0)|答案(2)|浏览(119)

我试图集成AG网格服务器端模型与Redux工具包查询,但问题是我有外部参数的变化,但没有找到如何处理这一点。
我有分页/过滤器/排序,我想我不能只是覆盖数据源,否则我可能会失去他们?
下面是一个例子

function MyGrid({ param1, param2 }: props): ReactElement {
    // param1/param2 are updated here
    const [triggerPostData] = usePostDataMutation();

    const createDatasource: () => IServerSideDatasource = useCallback(() => {
        return {
            getRows: (parameters): void => {
                // param1/param2 arent updated here
                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} />;
}
eufgjt7s

eufgjt7s1#

此处为RTK查询作者。
老实说,根据使用AG-Grid数据源的个人经验:如果您没有 * 需要 * 使用第三方工具,如RTK查询,只需使用正常的提取直接开箱即用。
AG-Grid有它自己的缓存,并且想要对何时发出请求有很大的控制权-RTK Query也做同样的工作。与其让两个工具争夺“谁做什么”,只需使用一个工具。在这种情况下,你不需要两个工具。

3qpi33ja

3qpi33ja2#

在你的代码中,datasource只被设置一次(在greadReady回调中)。然后当param1param2被更改时,它会创建一个新的createDatasource函数,这个函数不会被网格使用。我建议通过AgGridReact属性serverSideDatasource设置datasource

function MyGrid({ param1, param2 }: props): ReactElement {
  // param1/param2 are updated here
  const [triggerPostData] = usePostDataMutation();

  const serverSideDatasource: IServerSideDatasource = useMemo(() => {
    return {
      getRows: (parameters): void => {
        // param1/param2 arent updated here
        triggerPostData({ param1, param2, rowsRequestData: parameters.request })
        ...
      },
    };
  }, [param1, param2, triggerPostData]);

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

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

UPD:正如@phry所指出的,服务器端行模型是通过getRows方法围绕命令式方法设计的,因此将RTK Query与服务器端模型一起使用是不切实际的。

相关问题