web-dev-qa-db-ja.com

ngrxのstore.selectとは

Reduxは初めてで、ngrxから始めました。このコード行の意味を理解できないstore.select：

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

非常に簡単に言えば、selectはアプリケーション状態からObservableにラップされたデータのスライスを返します。

つまり、select演算子は必要なデータのチャンクを取得し、それをObservableオブジェクトに変換します。したがって、必要なデータをラップするObservableが返されます。データを消費するには、サブスクライブする必要があります。

非常に基本的な例を見てみましょう。

  1. ストアのモデルを定義しましょう

    エクスポートインターフェイスAppStore {clock：Date}

  2. 「@ ngrx/store」からストアをコンポーネントにインポートします

  3. コンストラクターに注入してストアを作成します

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

  4. SelectはObservableを返します。

    したがって、次のようにコンポーネントでクロック変数を宣言します。

    _public clock: Observable<Date>;_

    今、次のようなことができます：

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

22
Mav55

うわー、これは大きなトピックです。したがって、基本的に「選択」は、実際にはアプリケーション状態オブジェクトの一部の値を取得するためにこの場合に使用されるRXJS演算子です。メインアプリの状態には、ユーザーの配列とセキュリティ機能の配列があるとしましょう。 「選択」を使用すると、そのユーザー配列だけの値を持つオブザーバブルへの参照を取得できます。 ngrxを使用する前に、ObservablesとRXJSについて学習する必要があります。この記事は、ngrxのメインのGithubプロジェクトページからリンクされていることがわかりました。

https://Gist.github.com/btroncone/a6e4347326749f93851

RXJSとreduxは大きなトピックになる可能性がありますが、小さなバイトサイズのチャンクで知識に取り組むことをお勧めします。本当に快適に感じられるようになるまで、約2か月かかりました。 ngrxにとどまらない場合でも、RXJSがどのように機能するかを理解することは非常に有用であり、時間をかけて学習する価値があります。

RXJSの入門書として役立つGistの記事を次に示します。 https://Gist.github.com/staltz/868e7e9bc2a7b8c1f754

19
wiredprogrammer

'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'を介してサブスクライブできるオブザーバブルを返します。

2
Derek Kite

This.store.select（ 'keyname'）は、 'keyname'プロパティが持つストアオブジェクトからデータを返します。 createSelectorを使用してメインモジュールのStoreModule.forFeature（ "master"、masterReducer）で複数のリデューサーを使用して、ストア内の内部オブジェクトをさらに検索できます。

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