CODEWITHSUNDEEP
javascriptreactjsreduxreact-redux
user18472307
user18472307

Reputation:

Redux-Toolkit what are non-serializable values and why am i getting an error

So I´m setting up a redux store for my website. It´s using a codemirror editor, who´s reference I want to have in store, so I can get or set it´s value without passing it around through all those components. slice for the editor.

import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { IUnControlledCodeMirror } from 'react-codemirror2-react-17';

interface AuditState {
  isLoading: boolean;
  loadingMessage: string;
  editorRef: null | IUnControlledCodeMirror;
}

const initialAuditState: AuditState = {
  isLoading: false,
  loadingMessage: '',
  editorRef: null
};

const auditSlice = createSlice({
  name: 'audit',
  initialState: initialAuditState,
  reducers: {
    changeLoading(state, action: PayloadAction<string>) {
      state.isLoading = !state.isLoading;
      state.isLoading
        ? (state.loadingMessage = action.payload)
        : (state.loadingMessage = '');
    },
    setEditorRef(state, action: PayloadAction<IUnControlledCodeMirror>) {
      state.editorRef = action.payload;
    }
  }
});

export const { changeLoading, setEditorRef } = auditSlice.actions;

export default auditSlice;

store configuration:

import { configureStore } from '@reduxjs/toolkit';
import auditSlice from './slices/auditSlice';

export const store = configureStore({
  reducer: {
    audit: auditSlice.reducer
  }
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

where I dispatch the editor to the redux store:

import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/material.css';
import 'codemirror/mode/solidity/solidity.js';
import { useDispatch } from 'react-redux';
import { setEditorRef as setReduxEditor } from '../../../../Redux/slices/auditSlice';
import {
  IUnControlledCodeMirror,
  UnControlled as UnControlledEditor
} from 'react-codemirror2-react-17';

interface EditorProps {
  value: string;
}

const Editor = ({ value }: EditorProps) => {
  const dispatch = useDispatch();
  const onEditorDidMount = (editor: IUnControlledCodeMirror) => {
    dispatch(setReduxEditor(editor));
  };

  return (
    <div className="editor-container">
      <div className="editor-title text-center rounded-t-lg">
        SMART CONTRACT CODE
      </div>
      <UnControlledEditor
        editorDidMount={onEditorDidMount}
        value={value}
        className="code-mirror-wrapper"
        options={{
          lineWrapping: true,
          lint: true,
          mode: 'solidity',
          theme: 'material',
          lineNumbers: true
        }}
      />
    </div>
  );
};

export default Editor;

For some reason, I´m getting this error message:

A non-serializable value was detected in an action, in the path: payload. Value: CodeMirror {options: {…}, doc: Doc, display: Display, state: {…}, curOp: null, …} Take a look at the logic that dispatched this action: {type: 'audit/setEditorRef', payload: CodeMirror}

Any idea what this means and how to solve it?

Thankful for any help I can get! Cheers

Upvotes: 2

Views: 7236

Answers (1)

Cesare Polonara
Cesare Polonara

Reputation: 3860

Redux works better with serializable objects, such objects, are objects that can be easily converted into a storable format like string, buffer or blob. Sometimes objects are complex and they might have cyclic references inside, such logics can't be serialized with JSON.stringify for example, and that usually means that it's not a good idea to put such objects in a Redux store. It's not a NO-NO by the way, you still can do that by disabling the serializable-check middleware for certain reducers, payloads, as explained here: https://redux-toolkit.js.org/usage/usage-guide#working-with-non-serializable-data Just make sure you really need to save the instance of codeMirror in the Redux store (it means that you want listen to some changes), or if it's enough to store it in a ref instead.

Upvotes: 4

Related Questions