Question

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

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

Answer 1

哇，这是一个很大的话题。所以基本上＆＃34;选择＆＃34;实际上是一个RXJS运算符，在这种情况下用于检索应用程序状态对象的一部分的值。所以说你的主应用程序状态有一组用户和一系列安全功能。＆＃34;选择＆＃34;允许您获取对其值仅为该用户数组的observable的引用。在你进入ngrx之前，你真的需要研究Observables和RXJS。我发现这篇文章与ngrx的主要Github项目页面相关联。

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

RXJS和redux可能是一个很大的话题，但我建议以小口大小的方式处理你的知识。在我真正开始感到舒服之前，我花了大约2个月的时间来处理它。即使你不和ngrx呆在一起，理解RXJS如何工作也是非常有用的，值得花时间投资来学习它。

这是一篇精彩的文章，也为RXJS提供了一个很好的介绍。 https://gist.github.com/staltz/868e7e9bc2a7b8c1f754

Answer 2

用非常简单的术语来说，select会从包含在Observable中的应用程序状态返回一段数据。

这意味着，select运算符获取您需要的数据块，然后将其转换为Observable对象。所以，你得到的是一个包含所需数据的Observable。要使用您需要订阅的数据。

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

让我们定义商店的模型

导出界面AppStore { 时钟：日期 }
从'@ngrx / store'
通过注入构造函数
创建商店
constructor(private _store: Store<AppStore>){}
选择返回Observable。

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

public clock: Observable<Date>;

现在您可以执行以下操作： -

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

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');

...

在bootstrap中，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是定义的所有减速器。待办事项减少器的定义如下：

    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
          ];

有几种方法可以执行此操作，您可以编写所有reducers的列表，实际上是定义了一系列引用reducer对象的对象键。

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

Answer 4

This.store.select（'keyname'）将返回具有'keyname'属性的存储对象中的数据。您可以在带有createSelector的主模块中使用带有StoreModule.forFeature（“ master”，masterReducer）的多个reduce来进一步在商店中查找内部对象

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

什么是ngrx中的store.select

4 个答案: