Component not responding to state change

Question

In my effect I am dispatching two actions: one to load the participant, another to update what should currently be on the "nav stack" --The latter is because we are planning on implementing a system where by depending on what component a user selected, we need to keep track of what was before so that they can navigate back to it. The issue is that in the component it properly catches the change in the value of the participant, however, it does not do the same for when the navStack state is updated.

Effect:

loadParticipant$: Observable<actions.ParticipantLoaded | actions.ParticipantLoadError> = createEffect(() =>
      this.dataPersistence.fetch(actions.ParticipantViewActionTypes.LoadParticipant, {
          run: (action: actions.LoadParticipant) => {
              const request = action.payload;
              return this.participantService.getParticipant(request)
              .pipe(
                  switchMap((participant : IParticipantProfile) => {
                      if(participant) {
                          return [ 
                              new actions.ParticipantLoaded(participant),
                              new actions.AddPageToStack('ParticipantList')
                          ]
                      }
                  })
              )
          },
          onError: (action: actions.LoadParticipant, error) => {
              return new actions.ParticipantLoadError(error);
          }
      }));

Reducers:

case ParticipantViewActionTypes.ParticipantLoaded: {
            state = {
                ...state,
                participantViewLoaded: true,
                participantViewLoading: false,
                participant: action.payload,
            }

            break;
        }

        case ParticipantViewActionTypes.AddPageToStack: {
            //This doesn't seem to be actually making a new object, when we assign the state
            //the state reference already seems to be updated to the new value
            let newStack = {...state}.navStack;
            let topElement = newStack.peek();

            if(!topElement || topElement !== action.payload) {
                newStack.push(action.payload);
            }

            state = {
                ...state,
                navStack: newStack
            }
        }

Component's ngOnIt:

combineLatest([
        this.participantFacade.participant$,
        this.participantFacade.navState$
      ])
      .pipe(takeUntil(this.componentDestroyed$))
      .subscribe(([participant, navState]: [IParticipantProfile, Stack<string>]) => {
        if(participant) {
          this.entries = participant.Entries;
          this.participant = participant.User;
          this.participant.CircleColorClass = CoachingHelper.backgroundColorName(participant.User.UserId, participant.User.AccountStatus);
        }
        
        if(navState) {
            this.currentPage = navState.peek();
          }
        });

The if participant part is run accordingly, the navState however always has a storage (the variable that is our stack itself, really an array) is always an empty array even though if I step through the reducers I can see that participant loaded is hit first, then our add page to stack action is hit. However, looking at redux tools the state never seems to update itself and the navStack variable in my state remains unchanged:

What am I missing here?

Answer 1

Lord I am truly an idiot. Forgot a damn break statement, which meant it went straight to the next case which is the POP case. Someone please kill me