Redux dispatch boolean returns non-serializable error

Question

I'm trying to use Redux to set a boolean in the state to show/hide an element.

Whenever I dispatch a boolean the following error shows:
A non-serializable value was detected in the state, which is weird as a boolean is perfectly serializable?

Todo.js

import { useSelector, useDispatch } from "react-redux";

export default function Planner() {
  const dispatch = useDispatch();

  function createHandleClickOpen() {
    dispatch(createDialogOpen(true));
  }

createHandleClickOpen is bound on a button's onClick() method.

Plannerstore.js

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

export const plannerSlice = createSlice({
  name: "planner",
  initialState: {
    createDialogOpen: false,
  },
  reducers: {
    createDialogOpen: (state) => (value) => {
      state.createDialogOpen = value;
    },
  },
});

// Action creators are generated for each case reducer function
export const { createDialogOpen } = plannerSlice.actions;

export default plannerSlice.reducer;

Store.js

import { configureStore } from "@reduxjs/toolkit";
import plannerSlice from "../../feature/planner/plannerStore";

export default configureStore({
  reducer: {
    planner: plannerSlice,
  },
});

Answer 1

You have a mistake in your reducer.

You should use the action payload to retrieve the value you dispatch:

export const plannerSlice = createSlice({
  name: "planner",
  initialState: {
    createDialogOpen: false,
  },
  reducers: {
    createDialogOpen: (state, action) => {
      state.createDialogOpen = action.payload;
    },
  },
});