ngrx 中的 store.select 是什么答案

【问题标题】：What is store.select in ngrxngrx 中的 store.select 是什么
【发布时间】：2016-08-12 15:13:12
【问题描述】：

我是 Redux 的新手，从 ngrx 开始。我无法理解这行代码store.select的含义：

 clock: Observable<Date>;
 this.clock = store.select('clock');

【问题讨论】：

标签： javascript angular redux ngrx

【解决方案1】：

用非常简单的术语来说，select 将应用程序状态中的一部分数据返回到一个 Observable 中。

它的意思是，select 操作符获取你需要的数据块，然后将其转换为 Observable 对象。所以，你得到的是一个包装了所需数据的 Observable。要使用您需要订阅的数据。

让我们看一个非常基本的例子。

让我们定义我们商店的模型

export interface AppStore {
   clock: Date
}

将 Store 从“@ngrx/store”导入到您的组件中

通过注入构造函数来创建商店

constructor(private _store: Store<AppStore>){}

Select 返回一个 Observable。

所以，在你的组件中声明时钟变量如下：-
```
public clock: Observable<Date>;
```
现在您可以执行以下操作：-
```
this.clock = this._store.select('clock');
```

【讨论】：

简单解释一下
我试过这个，我得到了一个 observable，如果我打印它我得到 > Store {_isScalar: false, actionsObserver: ActionsSubject, reducerManager: ReducerManager, source: Store, operator: DistinctUntilChangedOperator} 我的数据似乎在那个 observable 里面的某个地方，我如何从中得到它？
您需要订阅一个 observable，然后您将获得所需的数据。
Kloop4：如果你不知道 obervable 是什么，你需要研究一下 RxJs。请参考这里的官方页面reactivex.io/rxjs/class/es6/Observable.js~Observable.html
@Koop4 你需要使用异步管道

【解决方案2】：

哇，这是一个很大的话题。所以基本上“选择”实际上是一个 RXJS 运算符，在这种情况下用于检索应用程序状态对象的一部分的值。因此，假设您的主应用程序状态具有一组用户和一组安全功能。 “选择”允许您获取对可观察对象的引用，该可观察对象的值就是该用户数组。在你进入 ngrx 之前，你真的需要学习 Observables 和 RXJS。我发现这篇文章从 Github 主项目页面链接到 ngrx 很有帮助。

https://gist.github.com/btroncone/a6e4347326749f938510

RXJS 和 redux 可能是一个很大的话题，但我建议将你的知识分成小块。在我真正开始感到舒服之前，我花了大约 2 个月的时间来使用它。即使您不使用 ngrx，了解 RXJS 的工作原理也非常有用，值得花时间学习它。

这是一篇要点文章，它也很好地介绍了 RXJS。 https://gist.github.com/staltz/868e7e9bc2a7b8c1f754

【讨论】：

你能告诉我你是怎么花了 2 个月的时间来适应的吗？我的意思是每个开发人员都需要这样的时间，你是新手吗，顺便说一句很好的答案
另外我对select进行了更新，它类似于map运算符，接受函数和转换值，对吗？
我有一个正在处理的项目，我们正在转换为 Angular 2，并决定试一试ngrx。我是 ngrx 和 rxjs 的新手。我想说我花了更多时间学习 rxjs 的概念以及 observables 的工作原理，而不是 ngrx。我用 ngrx 掌握的大部分时间是设置 reducer 和流逻辑的最佳约定。如何设置动作创建者。我从 ngrx 商店项目自述文件链接的示例应用程序中获得了项目设置的重要灵感。 github.com/ngrx/example-app
能够理解示例应用程序中发生的事情需要一些时间。我还订阅了 Egghead，并观看了创作者 Dan Abrimov 制作的 redux 视频。阅读了一些关于 redux 项目问题的热门问题。
我已经做了大约 15 年的程序员，但我在过去 5 年左右才进入 JavaScript 方面，并且在过去 2 或 3 年才开始学习框架。我对框架场景有点晚了。

【解决方案3】：

它返回名为“时钟”的状态。

这是一个例子。在构造函数中调用 store.select，这次使用 'todos'。

https://github.com/btroncone/ngrx-examples/blob/master/todos/src/app/todo-app.ts

export class TodoApp {
    public todosModel$ : Observable<TodoModel>;
    //faking an id for demo purposes
    private id: number = 0;

    constructor(
        private _store : Store<AppState>
    ){
        const todos$ = _store.select<Observable<Todo[]>>('todos');
        const visibilityFilter$ = _store.select('visibilityFilter');

...

在引导程序中，provideStore 被赋予 APP_REDUCERS

import {bootstrap} from '@angular/platform-browser-dynamic';
import {TodoApp} from './todo-app';
import {provideStore} from "@ngrx/store";
import * as APP_REDUCERS from "./reducers/reducers";


export function main() {
  return bootstrap(TodoApp, [
      provideStore(APP_REDUCERS)
  ])
  .catch(err => console.error(err));
}

APP_REDUCERS 是定义的所有reducer。 todos reducer定义如下：

    import {ActionReducer, Action} from "@ngrx/store";
import {Todo} from "../common/interfaces";
import {ADD_TODO, REMOVE_TODO, TOGGLE_TODO} from "../common/actions";

export const todos : ActionReducer<Todo[]> = (state : Todo[] = [], action: Action) => {
  switch(action.type) {
      case ADD_TODO:
          return [
              ...state,
              action.payload
          ];

有几种方法可以做到这一点，您可以组成所有减速器的列表，本质上定义一系列引用减速器对象的对象键。

Store.select 返回一个 observable，您可以通过“|async”在组件或模板中订阅它。

【讨论】：

【解决方案4】：

This.store.select('keyname') 将返回来自 'keyname' 属性的存储对象的数据。您可以在主模块中使用带有 StoreModule.forFeature("master", masterReducer) 的多个 reducer 和 createSelector 进一步查找内部对象

export const getMasterState = createFeatureSelector<myModels.MasterState>('master');
export const getMatserBranchList = createSelector(
    getMasterState,
    (state: myModels.MasterState): myModels.Branch[] => state.branchList
);

【讨论】：