CODEWITHSUNDEEP
reactjstypescriptreduxreact-reduxredux-toolkit
sampa
sampa

Reputation: 639

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

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

Upvotes: 0

Views: 149

Answers (1)

Hai Thai
Hai Thai

Reputation: 314

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
}

Upvotes: 1

Related Questions