TanStack 表 |如何在 onPaginationChange 中使用 redux 操作而不是示例中的 setPaginationState

Question

使用这个例子
https://tanstack.com/table/v8/docs/examples/react/pagination-control
如果我需要分派 redux 操作而不是 useState - setPaginationState，如何使用 https://tanstack.com/table/v8/docs/api/features/pagination#onpaginationchange？

onPaginationChange: state => dispatch(browseItemModalActions.setPagination(state)) 在控制台中出现此错误：

`react_devtools_backend.js:4012 A non-serializable value was detected in an action, in the path: `payload`. Value: old => {
          let newState = functionalUpdate(updater, old);
          return newState;
        } 

Answer 1

这是一个有趣的问题！

根据示例使用

onPaginationChange: setPagination

 的方式，您可能会认为 

onPaginationChange

 函数会在新状态下被调用，但事实并非如此。

您的

onPaginationChange

 函数实际上是通过“更新器”函数调用的，该函数采用先前的状态并返回新的状态。这适用于 React 

setState

 函数，因为它们支持 

功能更新，您可以将新状态定义为先前状态的函数。

换句话说，当你看到这个时：

onPaginationChange: setPagination, 你认为它是这样做的：

onPaginationChange: (state) => setPagination(state), 但它实际上是这样做的：

onPaginationChange: (updater) => setPagination(prevState => updater(prevState)), 这是react-table源代码的相关部分：

setPagination: updater => {
  const safeUpdater: Updater<PaginationState> = old => {
    let newState = functionalUpdate(updater, old)

    return newState
  }

   return table.options.onPaginationChange?.(safeUpdater)
},

GitHub 源代码

---

在 Redux 操作中使用这个

updater

 功能并不明显或容易。 Redux 减速器是它们自己的“更新器”，并且操作必须采用原始数据。

最终，您可能需要考虑将这些数据存储在 Redux 中是否真的有意义。我确实有一些解决方法，但它们有其局限性。

您可以将分页状态保留在组件中，并使用
1. useEffect

    钩子将更改同步回 Redux，但这是一种单向同步，如果 Redux 分页状态的更改可能来自其他操作，则该同步将不起作用。

const reduxPagination = useSelector((state) => state.counter.pagination);

const [pagination, setPagination] = React.useState(reduxPagination);

const { pageIndex, pageSize } = pagination;

const dispatch = useDispatch();

useEffect(() => {
  dispatch(browseItemModalActions.setPagination(pagination));
}, [pagination, dispatch]);

onPaginationChange: setPagination,

您可以将更新器应用到之前从 Redux 中选择的状态和
2. dispatch

    更新后的值。

const pagination = useSelector((state) => state.counter.pagination);

const dispatch = useDispatch();

const table = useReactTable({
  state: {
    pagination
  },
  onPaginationChange: (updater) => {
    const nextState = updater(pagination);
    dispatch(browseItemModalActions.setPagination(nextState));
  },
  manualPagination: true,
...

但现在我的头要爆炸了，因为我收到一个 TypeScript 错误，告诉我

updater

 可以是一个函数，也可以是一个值……但我们只查看了源代码，它始终是一个函数！所以我不知道该怎么办了。这让我想知道 

react-table

 源代码是否是一个错误，回调是否意味着允许纯数据值。

Answer 2

添加回调来处理 props 中收到的分页更改

export function DataTable({
  columns,
  data,
  onPaginationChange,//Callback
}) {

const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
  });

const currentPageIndex = table.getState().pagination.pageIndex;

useEffect(() => {
  onPaginationChange && onPaginationChange(currentPageIndex);
}, [currentPageIndex]);

使用useEffect钩子监听当前页面索引的变化 并在发生变化时触发 onPaginationChange 回调。

使用方法

<DataTable
        columns={columns}
        data={event.data}
        onPaginationChange={console.log}
      />