Redux-Toolkit什么是不可序列化的值，为什么我得到一个错误

Question

所以我正在为我的网站设置一个redux商店。它使用了一个代码镜像编辑器，我想要存储谁的引用，所以我可以获取或设置它的值，而不需要通过所有这些组件传递它。为编辑器切片。

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;

存储配置:

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;

，我将编辑器分派到redux存储:

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;

由于某些原因，我得到了这个错误消息:

在路径中的操作中检测到一个不可序列化的值:payload。取值:CodeMirror {options:{…}，doc: doc, display:Display, state:{…}，curOp: null，…}来看看这个逻辑发送此操作:{type: 'audit/setEditorRef'，负载:CodeMirror}

知道这是什么意思吗?怎么解决?

感谢我能得到的任何帮助!欢呼声

Answer 1

Redux在serializable objects中工作得更好，这样的对象是可以很容易地转换为可存储格式的对象，如string,buffer或blob。有时对象很复杂，它们内部可能有循环引用，例如，这样的逻辑不能用JSON.stringify序列化，这通常意味着把这样的对象放在Redux存储中不是一个好主意。顺便说一下，它不是NO-NO，您仍然可以通过禁用某些减少器的serializable-check中间件来实现这一点，如这里所述:https://redux-toolkit.js.org/usage/usage-guide#working-with-non-serializable-data只要确保您确实需要将codeMirror的实例保存在Redux存储中(这意味着您想要侦听一些更改)，或者将其存储在ref中就足够了。