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 ponents. 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

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 ponents. 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

• javascript
• reactjs
• redux
• react-redux

Share Improve this question Follow asked Apr 30, 2022 at 14:02 user18472307user18472307

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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 plex 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/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.

You can add this middleware in your store configuration so that you can't get any serializable error :

import { configureStore } from '@reduxjs/toolkit'

export const store = configureStore({
  reducer: {},
  middleware:(getDefaulutMiddleware) => getDefaulutMiddleware({
      serializableCheck: false,
    })
}) 

If you have any doubt, feel free to reach!!