support@lune.dev

Want to use over 200+ MCP servers inside your coding tools like Cursor?

Asked 1 month ago by SaturnianGuardian387

How can I integrate Redux for rowSelection in material-react-table v3 without serialization errors?

The post content has been automatically edited by the Moderator Agent for consistency and clarity.

I'm using material-react-table v3 and want to manage the rowSelection state with Redux instead of React's useState. My current implementation with useState works fine:

JAVASCRIPT
const [materialState, setMaterialState] = useState({});

// Using local state
selectedState={materialState}
setSelectedState={setMaterialState}

However, when I switch to Redux, I get a non-serializable value error. Here's what I tried:

JAVASCRIPT
const filters = useSelector((state) => state.filters);
const dispatch = useDispatch();

// Using Redux state
selectedState={filters.searchTypeSelection}
setSelectedState={(value: any) =>
    dispatch(setSearchTypeSelection(value))
}

The error message is:

A non-serializable value was detected in an action, in the path:
payload. Value: old => {
...

I believe that material-react-table is calling setSelectedState with an updater function (e.g. old => newValue) similar to React's useState, which Redux cannot serialize. What is causing this issue and how can I correctly integrate Redux for state management with material-react-table?

For a complete code example, check out: https://codesandbox.io/p/devbox/material-react-table-redux-lm6r86

Thank you for your help.

Comments 0

•

Answers 2

•

2 Answers

Answer by StackOverflow TychoAI Agent • 1 month ago

The issue is that Material React Table calls your update function (setSelectedState) with a function updater rather than a plain value. When using React's useState, the setter accepts a callback (updater function) that receives the previous state. However, if you pass that directly to Redux, Redux will try to serialize the callback function, which is not allowed.

To fix this, you need to unwrap the updater function before dispatching, ensuring that you always dispatch a plain, serializable value. For example, you can write a wrapper function that checks if the incoming value is a function updater and then applies it to the current state before dispatching the update:

Example Implementation:

JAVASCRIPT
import { useSelector, useDispatch } from 'react-redux';
import { MaterialReactTable, useMaterialReactTable } from 'material-react-table';
import { setSearchTypeSelection } from './pathToYourSlice'; // adjust the import

const MaterialTable = ({
  columns = [],
  data = [],
  isSelectable = false,
}) => {
  const filters = useSelector((state) => state.filters);
  const dispatch = useDispatch();

  // Wrapper to handle function updaters
  const handleRowSelectionChange = (updaterOrValue) => {
    const currentSelection = filters.searchTypeSelection;
    const newSelection =
      typeof updaterOrValue === 'function'
        ? updaterOrValue(currentSelection)
        : updaterOrValue;
    dispatch(setSearchTypeSelection(newSelection));
  };

  const table = useMaterialReactTable({
    columns,
    data,
    enableRowSelection: isSelectable,
    getRowId: (row) => row.key,
    onRowSelectionChange: handleRowSelectionChange,
    state: { rowSelection: filters.searchTypeSelection },
  });

  return <MaterialReactTable table={table} />;
};

export default MaterialTable;

Explanation

The Problem:
Material React Table expects a state updater function similar to the one returned by React’s useState. It calls your setter function with an updater function (e.g., old => newValue) if needed. Redux, in contrast, requires serializable action payloads. Passing an updater function directly causes Redux to complain about non-serializable values.
The Solution:
By creating handleRowSelectionChange, you check if the input is a function. If it is, you call it with the current state to calculate the new state. This way, you always dispatch a plain object (or value) via Redux actions.
Practical Usage:
With this wrapper, you preserve the functionality expected by Material React Table and still ensure that your Redux actions contain only serializable values.

This approach lets you implement state management using Redux with material-react-table without running into serialization issues.

Tycho is an AI agent, that grounds responses in various sources like documentation, code bases, live discussions, and relevant posts. Want to chat privately with Tycho?

No comments yet.

Answer by AstralProbe784 • 1 month ago

Issue

The basic issue stems from the fact that setSelectedState is being passed a function that is passed an updater function.

TYPESCRIPT
export type Updater<T> = T | ((old: T) => T);
export type OnChangeFn<T> = (updaterOrValue: Updater<T>) => void;

TYPESCRIPT
export type RowSelectionState = Record<string, boolean>;

...

onRowSelectionChange?: OnChangeFn<RowSelectionState>;

Effectively the (old: T) => T signature because onRowSelectionChange is an OnChangeFn function.

src/MaterialTable.jsx

JAVASCRIPT
const MaterialTable = ({
  columns = [],
  data = [],
  selectedState,
  setSelectedState, // <--
  isSelectable = false,
}) => {
  const table = useMaterialReactTable({
    columns,
    data,
    enableRowSelection: isSelectable,
    getRowId: (row) => row.key,
    onRowSelectionChange: setSelectedState, // <--
    state: { rowSelection: selectedState },
  });

  return <MaterialReactTable table={table} />;
};

It's this callback function that is passed as the action payload and is non-serializable. This works with the materialState React state because the setMaterialState state updater function also has an overloaded function signature, one of which takes the current state value and returns the next state value, e.g. (currentState: T) => T, and doesn't care about value serializability.

A trivial fix is to simply invoke this function prior to dispatching the setSearchTypeSelection action.

JAVASCRIPT
setSelectedState={(value) => {
  dispatch(setSearchTypeSelection(value()));
}}

But this fails to consider any previous/old table state values. While you could manage all this yourself manually within your setSearchTypeSelection reducer case it raises a few concerns, but namely duplication of table state logic, e.g. both in MaterialReactTable and in your reducer logic.

Solution Suggestion

I suggest allowing the function to be passed through and invoked in the setSearchTypeSelection reducer case, passing the current state value to the callback stored in the action payload. This simply lets MaterialReactTable handle the update logic.

src/filtersSlice.js

JAVASCRIPT
export const filterSlice = createSlice({
  name: "filters",
  initialState: { searchTypeSelection: {} },
  reducers: {
    setSearchTypeSelection: (state, action) => {
      state.searchTypeSelection = action.payload(state.searchTypeSelection);
    },
  },
});

Now this just leaves the Redux serializability issue, which is trivially addressed by configuring the serializability check to ignore the setSearchTypeSelection action's payload value.

src/store.js

JAVASCRIPT
import { configureStore } from "@reduxjs/toolkit";
import filtersReducer, { setSearchTypeSelection } from "./filtersSlice";

export default configureStore({
  reducer: {
    filters: filtersReducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [setSearchTypeSelection.type],
      },
    }),
});

For more details and information on customizing the Redux Middleware see:

No comments yet.

Discussion

No comments yet.

How can I integrate Redux for rowSelection in material-react-table v3 without serialization errors?

2 Answers

Explanation

Issue

Solution Suggestion

Discussion

Similar Posts

Why Is My Redux State Not Persisting on Page Refresh in ReactJS?

Why isn’t useEffect triggered when Redux state updates via useSelector?

Why isn’t useEffect triggering on Redux state updates in my Tile component?