Redux Toolkit: 'Cannot perform 'set' on a proxy that has been revoked'

I'm trying to recreate a Memory-like game with React. I'm using Redux Toolkit for state management, but I'm having trouble with one use case.

In the selectCard action, I want to add the selected card to the store, and check if there's already 2 of them selected. If so, I want to empty the selected array after a delay.

const initialState : MemoryState = {
    cards: [],
    selected: [],
}

const memorySlice = createSlice({
    name: 'memory',
    initialState: initialState,
    reducers: {        
        selectCard(state: MemoryState, action: PayloadAction<number>) {
            state.selected.push(action.payload);
            if (state.selected.length === 2) {
                setTimeout(() => {
                    state.selected = [];
                }, 1000);
            }
        }
    }
});

The cards get selected just fine, but when I select 2 I get this error after 1 sec:

TypeError: Cannot perform 'set' on a proxy that has been revoked, on the line state.selected = [];

I'm new to this stuff, how do I access the state after a delay? Do I have to do it asynchronously? If so, how?


As stated in their documentation, don't perform side effects inside a reducer.

I would add the setTimeout when dispatching the action instead:

// so the reducer:
...
if (state.selected.length === 2) {
  state.selected = [];
}
...

// and when dispatching
setTimeout(() => {
  dispatch(selectCard(1))
}, 1000)