Redux + modify and send state - A non-serializable value was detected in the state

Question

In my Reactform the values are stored onChange in a local component state. Is it the correct way to use these values (state in component state) and send it onSubmit to the redux store and then make an Api call to the backend?

Wenn I try to set the state in the store I got the error "A non-serializable value was detected in the state". My state in the store looks like this. Is this completely wrong?

export const initialState = {
    dataA: "",
    dataB: 0,
    dataC: new DataXYZ(),
    dataD: new DataXYZ()
}

export const testSlice = createSlice({
    name: 'test',
    initialState,
    reducers: {},
    extraReducers: builder => {
        builder.addCase(getTest.fulfilled, (state, action) => {
            state.dataD.description = action.payload.description
            return state
        })
        [...]
    },
})

export default testSlice.reducer

The same problem and solution https://stackoverflow.com/questions/61704805/getting-an-error-a-non-serializable-value-was-detected-in-the-state-when-using — Vitaliy Rayets, Sep 16 '21 at 15:23
It says this would be bad practice correct? What would be better? "Yes. We've always told Redux users they should not put non-serializable values in the store. " — sampa, Sep 16 '21 at 15:31
Resolved https://stackoverflow.com/questions/61704805/getting-an-error-a-non-serializable-value-was-detected-in-the-state-when-using/68509710#68509710 — Vitaliy Rayets, Sep 16 '21 at 15:40
The best thing is to not store class instances in state. But you can disable the serializable check middleware from redux toolkit if you’re hell-bent on doing it. — Linda Paiste, Sep 16 '21 at 15:48

score 1 · Answer 1 · answered Sep 17 '21 at 05:02

The error when you trying to init a state with a class instance

export const initialState = {
    dataC: new DataXYZ(),
    dataD: new DataXYZ()
}

Should update the intestate correct type

interface DataXYZType {
  description: string
}

export const initialState = {
    dataD: DataXYZType
}

Redux + modify and send state - A non-serializable value was detected in the state

1 Answers1