如何在TanStack Table的onPaginationChange中使用Redux Action替代setPaginationState

问题原因 #

TanStack Table的onPaginationChange回调支持两种参数类型：

• 直接传入分页状态对象（比如{pageIndex: 1, pageSize: 10}）
• 传入函数式更新（比如(oldState) => newState）

而Redux要求action的payload必须是可序列化的值（对象、数组、字符串等），函数属于不可序列化类型，所以直接把onPaginationChange的参数传给Redux dispatch时，就会触发这个警告。

解决方案 #

1. 转换函数式更新为实际状态对象 #

在onPaginationChange回调里先判断参数类型，如果是函数，就用当前表格的分页状态执行它，得到最终的状态对象后再dispatch：

// 假设已通过useTable获取table实例
const table = useTable({
  columns,
  data,
  state: {
    pagination: paginationStateFromRedux, // 从Redux获取的分页状态
  },
  onPaginationChange: updater => {
    // 处理函数式更新，转换成实际状态对象
    const newPagination = typeof updater === 'function'
      ? updater(table.getState().pagination)
      : updater;
    dispatch(browseItemModalActions.setPagination(newPagination));
  },
  // 其他配置项...
});

2. 确保Redux Reducer正确处理状态 #

确认你的Redux slice里的setPagination reducer直接赋值普通对象：

import { createSlice } from '@reduxjs/toolkit';

const browseItemModalSlice = createSlice({
  name: 'browseItemModal',
  initialState: {
    pagination: {
      pageIndex: 0,
      pageSize: 10,
    },
    // 其他状态...
  },
  reducers: {
    setPagination: (state, action) => {
      // payload是普通可序列化对象，直接替换分页状态
      state.pagination = action.payload;
    },
  },
});

export const { setPagination } = browseItemModalSlice.actions;
export default browseItemModalSlice.reducer;

3. （不推荐）忽略Redux的序列化检查 #

如果上述方法无法满足需求，可临时忽略该action的序列化检查，但这不符合Redux最佳实践，可能导致调试困难：

import { configureStore } from '@reduxjs/toolkit';
import browseItemModalReducer from './slices/browseItemModalSlice';

const store = configureStore({
  reducer: {
    browseItemModal: browseItemModalReducer,
    // 其他reducer...
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        // 忽略setPagination action的序列化检查
        ignoredActions: ['browseItemModal/setPagination'],
      },
    }),
});

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