组件不响应状态变化

Question

在我看来，我正在调度两个动作：一个加载参与者，另一个更新当前应该在“导航堆栈”上的内容 -- 后者是因为我们计划实施一个系统，其中取决于用户选择了什么组件，我们需要跟踪之前的内容，以便他们可以导航回它。问题是在组件中它正确地捕获了参与者值的变化，但是，当 navStack 状态更新时它并没有做同样的事情。

效果：

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);
          }
      }));

减速器：

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
            }
        }

组件的 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();
          }
        });

相应地，if participant 部分是运行，但是 navState 总是有一个存储（变量是我们的堆栈本身，实际上是一个数组）总是一个空数组，即使我单步执行 reducers我可以看到加载的参与者首先被点击，然后我们的添加页面到堆栈操作被点击。但是，查看 redux 工具，状态似乎永远不会自我更新，我状态中的 navStack 变量保持不变：

我在这里错过了什么？

Answer 1

主啊，我真是个白痴。忘记了一个该死的 break 语句，这意味着它直接进入下一个案例，即 POP 案例。有人请杀了我

组件不响应状态变化

Component not responding to state change

angular

ngrx