Question

我有几个子商店。让我们说Sub1和Sub2使用以下状态和reducers（对我的问题不感兴趣......我猜）：

Sub1的：

export interface Sub1State {
  sub1value: string
}

export function sub1reducer(state: Sub1State, action: Action): Sub1State {
  ...
}

分公司2：

export interface Sub2State {
  sub2value: number
}

export function sub2reducer(state: Sub2State, action: Action): Sub2State {

}

然后我将这两个子状态合并为一个ActionReducerMap<ApplicationState>：

export interface ApplicationState {
  sub1: Sub1State,
  sub2: Sub2State
}

export const reducers: ActionReducerMap<ApplicationState> = {
  sub1: sub1reducer,
  sub2: sub2reducer
};

并注册＆＃39;它到商店：

StoreModule.forRoot(reducers)

现在，在Angular组件中，我想选择Sub1商店并获取sub1value字符串。所以我做...

sub1value$: Observable<string>;

constructor(private store: Store<Sub1State>) {
  this.sub1value$ = store.map(state => {
    console.log(state);
    return state.sub1value;
  });
}

在log语句中，我希望得到以下对象（Sub1State对象）：

{
  sub1value: 'initial value'
}

但我真正得到的是这个对象：

{
  sub1: {
    sub1value: 'initial value'
  }
}

这是否按预期工作？如果是，我该如何使用Sub1State接口？因为sub1不是界面的一部分。

并且好奇的是，在调用state.sub1value时，我没有得到任何错误（编译器错误和运行时错误），这显然是错误的，因为它必须是state.sub1.sub1value。没有运行时错误我理解，它只是未定义。但是在我看来，TypeScript编译器应该抛出一个错误。

我真的很困惑：/

修改

以下是我期望它如何运作的示例：https://stackblitz.com/edit/angular-w34kua?file=app%2Fapp.component.ts

Answer 1

当您获得应用程序的状态时，它将返回一个对象。你的州有两个子状态，它们被称为sub1和sub2。每个都是它自己的对象。所以它按预期工作。您需要返回state.sub1.sub1value;

或者我通常做的是，通过做这样的事情订阅特定的reducer，然后我只返回特定的子状态而不是整个状态：

constructor(private store: Store<Sub1State>) {
  store.select('sub1').subscribe((state : Sub1State) => {
    console.log(state);
    this.sub1value$ = state.sub1value;
  });
}

ngrx / store 4：从商店

1 个答案: