Is it possible to add a method to redux slice state

Question

I'm trying this

const initialState = { 
    warningModal: {
        show: false,
        question: "are you sure?",
        description: "placeholder",
        confirming: () => {
            alert('test me')
        }
    },
}
export const uiSlice = createSlice({ 
    name: "ui",
    initialState,
    reducers: {
        showWarningModal: (state, action) => {
            state.warningModal = true
            state.warningModal.confirming = action.payload // haven't tested
        },
        hideWarningModal: (state) => {
            state.warningModal.show = false
        }
    }
});

I'm creating a reusable pop-up model. When I click different buttons (like deleting various things) I'll show the model and change what happens when I click confirm

But in the console I get this

A non-serializable value was detected in the state, in the path: ui.warningModal.confirming.

Does this mean it can't be done or that I'm doing it wrong

Answer 1

It means that while it is possible, it might cause bugs and you should not do it - non-serializable values as functions often cause problems with middleware like redux-persist or the devtools.

Generally, I don't see much reason for having a modal managed with Redux - I'd recommend you look into just using a reusable component with a Portal - that's what most UI libraries do. Maybe you even find a UI library that already has a modal component you want to use.