CODEWITHSUNDEEP
jsonreduxredux-toolkit
vygrdev
vygrdev

Reputation: 203

A non-serializable value was detected in the state using redux toolkit and JSON data

I am trying to return some data from my db and then insert it into my front end state with redux toolkit, it was working fine for some dummy data structured as an array of objects.

Now I am getting the data from my db via an api it is not working. I am getting this error message:

A non-serializable value was detected in the state, in the path: `word.preppedWord.0.$$typeof`. Value: Symbol(react.element) 
Take a look at the reducer(s) handling this action type: word/checkMorphemes.

Is it because I am returning my database data with res.json? I am unsure of the proper way to return the data if so.

Here is my code:

const wordSlice = createSlice({
  name: 'word',
  initialState: { word: '', preppedWord: '' },
  reducers: {
    setWord(state, action) {
      state.word = action.payload
    },
    checkMorphemes(state, action) {
      state.preppedWord = decoder.morphemeCheck2(state.word)
    },
   [...]
})


export const morphemeCheck2 = (word) => {
  console.log(word)
  return word.split(' ').map((word, i) => {
    console.log(word)
    return (
      <span key={i}>
        <span>{prefixCheck(word)}</span>
        <span>{baseWord(word)}</span>
        <span>{suffixCheck(word)}</span>
      </span>
    )
  })
}

const prefixCheck = (x) => {
  api.getPrefixes().then((data) => {
    let prefixes = data
    for (let p = 0; p < prefixes.length; p++) {
      let prefix = prefixes[p].affix_name
      if (x.startsWith(prefix)) {
        return (
          <span className={'suffix ' + prefix} onMouseOver={() => {}}>
            {prefix}
          </span>
        )
      }
    }
  })
}

Here is the api route:

router.get('/prefixes', (req, res) => {
  db.getPrefixes()
    .then((result) => {
      res.json(result)
    })
    .catch((err) => {
      console.error(`There is an error here: ${err.message}`)
    })
})

Upvotes: 0

Views: 1178

Answers (1)

phry
phry

Reputation: 44136

You are storing a React element in your state here - that should not be stored in state. You should create the React element when rendering and only store the word itself in Redux.

Upvotes: 0

Related Questions