ngrx中的store.select是什么

Question

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

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

Answer 1

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

它的意思是，select操作符获取您需要的数据块，然后将其转换为Observable对象。因此，您得到的是一个Observable，它封装了所需的数据。要消费数据，您需要订阅它。

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

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

   export interface AppStore {
      clock: Date
   }
   

2. 从"@ngrx/Store"将Store导入您的组件

3. 通过注入构造函数创建存储

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

4. Select返回Observable。

   因此，在组件中声明时钟变量如下：-

   public clock: Observable<Date>;
   

   现在你可以做如下操作：-

   this.clock = this._store.select('clock');
   

Answer 2

哇，这是个大话题。因此，基本上"select"实际上是一个RXJS运算符，在本例中用于检索应用程序状态对象的一部分的值。假设你的主应用程序状态有一组用户和一组安全功能。"选择"允许您获得对可观察对象的引用，其值仅为用户数组。在你进入ngrx之前，你真的需要学习Observables和RXJS。我发现这篇链接到ngrx的Github项目主页的文章很有帮助。

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

RXJS和redux可能是一个大话题，但我建议你把知识分成小块。我花了大约2个月的时间才真正感到舒适。即使你不喜欢ngrx，了解RXJS的工作原理也是非常有用的，值得花时间学习。

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

Answer 3

它返回称为"clock"的状态。

下面是一个例子。在构造函数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是定义的所有减速器。todos减速器定义如下：

    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返回一个可观察项，您可以通过"|async"在组件或模板中订阅该可观察项。

Answer 4

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

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