Angular 10/ Ngrx: Array as store property is always emtpy in previous state

Question

I am currently facing a strange behaviour of my store. I have an array as property of my store, where i want to add an item when an action is dispatched. The item is added correctly but not as a new item in the array but its the only item in the array because the array in the state is always empty.

e.g. initalState:

stopps: []

adding first stopp with id: 1:

stopps: [{ id: 1 }]

adding second stopp with id: 2:

stopps: [{ id: 2 }]

My reducer looks like that:

const umdispoReducer = createReducer(
  initialUmdispoState,
  on(UmdispoActions.addStopp, (state, {stopp}) => ({...state, stopps: [...state.stopps, stopp]}))
);

I already console.logged the state and could see that the stopps array is always empty when adding the new stopp. Does anyone have any idea why that is?

My state is:

export interface State {
  loading: boolean;
  stopps: DispoStopp[];
  sourceTour: Tour;
}

and the inital state:

export const initialUmdispoState: State = {
  loading: false,
  stopps: [],
  sourceTour: null
};

reducer:

export function reducer(state: State | undefined, action: Action): State {
  return umdispoReducer(initialUmdispoState, action);
}

So it looks like my store does always have the initial state. The state itself is a the state of a feature module

// EDIT: Found my bug. See my answer for the solution

Answer 1

Well i passed in the initial state to the reducer every time

WRONG:

export function reducer(state: State | undefined, action: Action): State {
  return umdispoReducer(initialUmdispoState, action);
}

CORRECT:

export function reducer(state: State | undefined, action: Action): State {
  return umdispoReducer(state, action);
}