Estoy aprendiendo redux y quiero pasar una función en mi tienda (como lo haría normalmente con la perforación de accesorios o la API useContext)

El problema es que me salen algunos errores:

serializableStateInvariantMiddleware.ts:195 A non-serializable value was detected in an action, in the path: `payload.handleNextStep`. Value: () => { console.log("This is my function"); } Take a look at the logic that dispatched this action: {type: 'register/changeStep', payload: {…}}

Y otro error quejándose de un valor no serializable en el estado.

Aquí está mi código:

Configuración de mi tienda:

 const store = configureStore({ reducer: { register: registerReducer, }, });

la rebanada:

 import { createSlice } from "@reduxjs/toolkit"; export const registerSlice = createSlice({ name: "register", initialState: { value: { handleNextStep: () => {} }, }, reducers: { changeStep: (state, action) => { state.value = action.payload; }, }, }); export const { changeStep } = registerSlice.actions; export default registerSlice.reducer;

Y finalmente, la muestra de código que me arroja un error:

 const dispatch = useDispatch(); const handleNextStep = () => { console.log("This is my function"); }; useEffect(() => { dispatch(changeStep({handleNextStep })); }, []);

¿Estoy equivocado con la lógica que estoy implementando? Gracias por adelantado.