Изменение состояния ngRx теряется

Question

Я очень новичок в ngRx, поэтому, пожалуйста, потерпите меня.

Следуя некоторым примерам, я пытаюсь управлять состоянием компонента sideBar (открыт / закрыт). Я определил некоторые интерфейсы для управления объектами состояния:

export interface AppState {
  readonly layoutState: LayoutState;
}

export interface LayoutState {
  sideBarOpen: boolean;
}

У меня в компоненте есть локальная переменная, которая реализует интерфейс LayoutState: layout: LayoutState;

Я подписываюсь на мое состояние в ngOnInit:

this.store.subscribe(appState => {
  this.layout = appState.layoutState;
  // (5)
});

У меня в пользовательском интерфейсе есть кнопка, которая вызывает функцию, содержащую эту строку: this.toggleSideNav(this.layout.sideBarOpen);

toggleSideNav выглядит так:

toggleSideNav(currentState: boolean) {
    this.store.dispatch(new LayoutActions.ToggleSidebarAction(currentState)); // (1)
  }

Вот мой эффект:

@Effect()
  toggleSidebar$ = this.actions$
    .ofType(LayoutActions.TOGGLE_SIDEBAR)
    .switchMap((action: ToggleSidebarAction) =>
      this.layoutService.toggleSidebar(action.payload) // (2)
    )
    .map((layoutState: LayoutState) => {
       // (4)
      return new LayoutActions.ToggleSidebarSuccessAction(layoutState);
    });

Вот функция layoutService.toggleSidebar:

toggleSidebar(currentState: boolean): Observable<LayoutState> {
    const rv = {
      sideBarOpen: !currentState
    };
    // (3) 
    return Observable.of(rv);
  }

---

Вот что я вижу при отладке. В положении:

(1) - currentState равно false - как и ожидалось

(2) - action.payload равно false - как и ожидалось

(3) - rv равно {sideBarOpen: true} - как и ожидалось

(4) - layoutState равно {sideBarOpen: true} - как и ожидалось

(5) - this.layout - это {sideBarOpen: false} - !!

Почему государство «теряется» между (4) и (5)?

Answer 1

Вздох. Что-то о публикации вопроса на SO заставляет меня выяснить ответ ...

Я забыл, что после Эффекта он идет к Редуктору. У моего редуктора было только это:

switch (action.type) {
    case Actions.LOAD_LAYOUT_SUCCESS:
      return action.payload;
    default:
      return state;
  }

Мне пришлось добавить регистр для сообщения TOGGLE_SIDEBAR_SUCCESS для отправки нового состояния (содержится в полезной нагрузке):

switch (action.type) {
    case Actions.LOAD_LAYOUT_SUCCESS:
      return action.payload;
    case Actions.TOGGLE_SIDEBAR_SUCCESS:   <--
      return action.payload;               <--
    default:
      return state;
  }

Перед добавлением этого редуктор перешел на случай по умолчанию и возвратил state, который является старым состоянием.

Надеюсь, это поможет кому-то еще.

TTE