I'm using Redux with Immer. This is my code so far:
clearMachineState(state, { payload }: ClearMachineStatePayload) {
const childrenIds = payload.children.map((child) => child.id);
const newMachines = typedMachineState.machine_state.machines.flatMap((machine) => {
const tmpMachines: MachineMapping[] = [];
childrenIds.forEach((id) => {
console.log(id, machine.machine_id);
if (id !== machine.machine_id) {
const foundMachine = tmpMachines.find(
(tmpMachine) => tmpMachine.machine_id === machine.machine_id,
);
if (!foundMachine) {
tmpMachines.push(machine);
}
}
});
console.log({ tmpMachines });
return tmpMachines;
});
console.log({ newMachines });
state.machine_state.machines = newMachines;
}
I want to remove from state.machine_state.machines
, these machines, which are present in payload.children
. The problem is, when I use the code above, in TS, all seems well, but when I log {tmpMachines}
, I see this:
Object { tmpMachines: (1) […
tmpMachines: Array [ Proxy ]
0: Proxy { <target>: null, <handler>: null }
length: 1
<prototype>: Array []
<prototype>: Object { … }
But if I use the mocked array, like so:
const newMachines = typedMachineState.machine_state.machines.flatMap((machine) => {...
I get the actual object.
But either way, the state.machine_state.machines = newMachines;
assignment doesn't happen. It does, if I try to do a state.machine_state.machines = [];
, but not for my created arrays.
I'd also like to map on state, not on an external source.
What am I missing?