ngrx - ngRx 状态更改丢失

问题描述

按照一些示例，我正在尝试管理侧边栏组件的状态（打开/关闭）。我已经定义了一些接口来管理我的状态对象：

export interface AppState {
  readonly layoutState: LayoutState;
}

export interface LayoutState {
  sideBarOpen: boolean;
}

我的组件中有一个实现 LayoutState 接口的局部变量：layout: LayoutState;

我订阅了我的状态ngOnInit：

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

我的 UI 中有一个按钮，它调用包含此行的函数：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）之间“迷失”？

标签： ngrx

我忘记了在效果之后，它进入了减速器。我的减速机只有这个：

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

在添加之前，reducer 正在进入默认情况，并返回state旧状态。

ngrx - ngRx 状态更改丢失

问题描述

解决方案

推荐阅读