redux - action to fill an array and then reset - arrays

Question

I am trying to fill a small array [Should have two elements]. The initial state is
selected: []
Once it fills 2 slots [a, b], it should compare if the numbers are equal (return true or false) and reset the array to the original state [].
export const selectTile = (idx) => {
return {
type: SELECT_TILE,
idx
};
};
const initialState = {
selected: [],
matched: 0,
score: 0
};
export default (state = initialState, action) => {
switch (action.type) {
case SELECT_TILE:
return { ...state, selected: state.selected.push(action.idx) };
default:
return state;
}
};
I have already stumbled upon the first problem. The above reducer returns an error 'state.selected.push is not a function'.
When the first action gets dispatched, it should do:
check if the array's length is smaller than 2
If yes, push the element to the array:
selected: [x]
another action:
check if the array's length is smaller than 2
yes, push the element to the array:
selected: [x, y]
another action:
check if the array's length is smaller than 2
no - compare if x === y, (return something, eg. true or false or any flag)
regardless of whether x===y or not, reset the 'selected' array to [] and wait for another action.
EDIT:
I think my description above was not accurate (btw, an action is dispatched on click of a tile):
action 1: [x]
action 2: [x, y] (if x=y, matched: true, selected: [])
action 3: [x] (the moment this action is dispatched, it should clear
the 'selected' array and a new element should be added to the array.
As it stands with the answer below, the third actions just clears the
array, but no new element is added.
I have adapted the answer below but it gives me an error that state.slice is not an action (error appears when I click on a tile for the second time (action 2 being dispatched).
case SELECT_TILE:
if (state.selected.length < 1) {
return { ...state, selected: [...state.selected, action.idx] };
} else if (state.selected.length === 1) {
const nextState = state.slice();
nextState.selected.concat(action.idx);
if (nextState.selected[0] === nextState.selected[1]) {
return { ...nextState, score: nextState.score + 1, selected: [] };
}
return { ...nextState, selected: [] };
}

Answer 1

You must use concat to push an item to the state array as it retun
export default (state = initialState, action) => {
switch (action.type) {
case SELECT_TILE:
return { ...state, selected: state.selected.concat(action.idx) };
default:
return state;
}
};
or you can do it with the spread operator itself, which i think is a better way
return { ...state, selected: [...state.selected, action.idx] };
As per your requirement is considered
export default (state = initialState, action) => {
switch (action.type) {
case SELECT_TILE:
if(state.selected.length < 2) {
return { ...state, selected: [...state.selected, action.idx] };
} else {
if(state.selected[0] === state.selected[1]) {
return {...state, matched: true, selected: []}
}
}
default:
return state;
}
};