我试图集成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} />;
}
2条答案
按热度按时间eufgjt7s1#
此处为RTK查询作者。
老实说,根据使用AG-Grid数据源的个人经验:如果您没有 * 需要 * 使用第三方工具,如RTK查询,只需使用正常的提取直接开箱即用。
AG-Grid有它自己的缓存,并且想要对何时发出请求有很大的控制权-RTK Query也做同样的工作。与其让两个工具争夺“谁做什么”,只需使用一个工具。在这种情况下,你不需要两个工具。
3qpi33ja2#
在你的代码中,datasource只被设置一次(在greadReady回调中)。然后当
param1
和param2
被更改时,它会创建一个新的createDatasource
函数,这个函数不会被网格使用。我建议通过AgGridReact属性serverSideDatasource
设置datasourceUPD:正如@phry所指出的,服务器端行模型是通过getRows方法围绕命令式方法设计的,因此将RTK Query与服务器端模型一起使用是不切实际的。