Question

我对ngRx很新，所以请耐心等待。

根据一些例子，我正在尝试管理sideBar组件的状态（打开/关闭）。我已经定义了一些接口来管理我的状态对象：

export interface AppState {
  readonly layoutState: LayoutState;
}

export interface LayoutState {
  sideBarOpen: boolean;
}

我的Component中有一个实现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）之间“丢失”？

Answer 1

叹息。关于在SO上发布问题的事情让我找到答案......

我忘了在效果之后，它会转到Reducer。我的Reducer只有这个：

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

ngRx状态变化迷失

1 个答案: