angular - 是否有一种类型安全的方式来访问 ngrx/store 中的商店成员？

Question

我一直在使用 angular2 浏览 ngrx/store 的文档

https://github.com/ngrx/store

https://github.com/ngrx/example-app

上面的示例应用程序暗示我应该使用以下方式访问商店的可观察成员：

counter: Observable<number>;
constructor(private store: Store<AppState>){
    this.counter = store.select('counter');
}

使用字符串'counter'访问对象成员感觉与 TypeScript 是对立的。是否有一种类型安全的方式来访问商店成员？

Answer 1

如果你看一下的实现select：

export function select<T, R>(pathOrMapFn: any, ...paths: string[]): Observable<R> {
  let mapped$: Observable<R>;
  if (typeof pathOrMapFn === 'string') {
    mapped$ = pluck.call(this, pathOrMapFn, ...paths);
  }
  else if (typeof pathOrMapFn === 'function') {
    mapped$ = map.call(this, pathOrMapFn);
  }
  else {
    throw new TypeError(`Unexpected type ${ typeof pathOrMapFn } in select operator,`
      + ` expected 'string' or 'function'`);
  }
  return distinctUntilChanged.call(mapped$);
}

您会看到传递字符串等价于pluck，但传递选择器函数等价于map- 这是类型安全的。

所以传递一个选择器函数。这就是示例 app中所做的。

使用您的示例：

counter: Observable<number>;
constructor(private store: Store<AppState>){
  this.counter = store.select(state => state.counter);
}