Non serializable value was detected in an action

The issue here is that on our client, say we update a word like so:

const updateWord = async (token, updatedWordData) => {

console.log('-- updateWord --');

const config = {

headers: {

Authorization: `Bearer ${token}`,

}

console.log('PUT ', API_URL + updatedWordData.date);

console.log(updatedWordData);

const response = await axios.put(API_URL, updatedWordData, config);

// at this point, response is a Promise.

return response.data; // we must return the data! DO NOT return Promise

}

Because when dispatch our updateWord function, if we were to return a Promise object…

1	dispatch(updateWord(formData));

…it will be assigned to state’s wordData, which is a violation because state can only take serializable value.

src/features/words/wordSlice.js

.addCase(updateWord.fulfilled, (state, action) => {

...

state.wordData = action.payload

...

})

A Promise is not serializable, so thus it will give an error like so: