React Redux Toolkit Typescript-在状态中检测到不可序列化的值

Question

我已经看到了这个问题的许多其他答案，但没有什么能解决我的问题。

我知道我不应该使用类，但我已经尝试从我的类中删除任何不可串行的东西。我想问题是是否有可能在Redux状态下使用typescript类。但是，除了尝试创建Envelope的新实例之外，我的所有类似乎都能工作。

export class SequenceStep {
time: number = 0;
note: number = 64;
velocity: number = 100;
gateLength: number = 0.8;
}
export class MidiSettings {
midiInputDeviceId: string = "";
midiInputDeviceName: string = "";
midiInputChannelNum: number = -1;
midiOutputDeviceId: string = "";
midiOutputDeviceName: string = "";
midiOutputChannelNum: number = 0;
}
export class EnvelopePoint {
// time in steps
time: number = 0;
value: number = 0;
}
export class Envelope {
id: string = "";
controller: string = "";
points: Array<EnvelopePoint> = [];
locked: boolean = true;
length: number = 8;
division: number = 8;
mode: string = "loop";
trigger: string = "first";
type: string = "envelope";
}
export class Sequence {
_id: string = "";
name: string = "";
text: string = "";
user_name: string = "";
user_id: string = "";
steps: Array<SequenceStep> = []
tempo: number = 120.0;
length: number = 8;
numSteps: number = 8;
division: number = 8;
midiSettings: MidiSettings = new MidiSettings();
currentEnvelopeId: string = "";
envelopes: Array<Envelope> = []
}

这是有问题的减速器createEnvelope导致错误。其他的似乎工作正常。

interface SequenceSliceState {
value: Sequence;
division: number;
}
const initialState : SequenceSliceState = {
value: new Sequence(),
division: 8
}
export const sequenceSlice = createSlice({
name: 'sequence',
initialState,
reducers: {
sequenceLoad: (state, payloadAction) => {
state.value = payloadAction.payload.sequence;
return state;
},
sequenceName: (state, payloadAction) => {
state.value.name = payloadAction.payload;
return state
},
createEnvelope: (state, action) => {
const controller = action.payload.controller
var sequence: Sequence = state.value
var newEnvelopeId = uuidv4()
var newEnvelope = new Envelope()    //newEnvelopeId, controller.name);
newEnvelope.id = newEnvelopeId
newEnvelope.controller = controller.name
newEnvelope.points = [{ time: 0, value: 0}, ]
if (sequence.envelopes == null) {
console.log(`🍕sequenceSlice - how can sequence.envelopes be null?`)
sequence.envelopes = [newEnvelope];
}
else {
state.value.envelopes = [...state.value.envelopes, newEnvelope];
}
state.value.currentEnvelopeId = newEnvelopeId;
return state
},

Answer 1

我认为我的错误只是在typescript项目中使用redux。我最终选择了Redux，因为我的研究涉及撤消/重做。我不认为redux被推荐用于新项目。我正在与Zustrand进行重构。