web-dev-qa-db-fra.com

Qu'est-ce que store.select in ngrx

Je suis nouveau sur Redux et a commencé avec ngrx. Je n'arrive pas à comprendre le sens de cette ligne de code store.select:

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

Wow, c'est un gros sujet. Donc, fondamentalement, "select" est en réalité un opérateur RXJS utilisé dans ce cas pour récupérer la valeur d'une partie de l'objet d'état de l'application. Donc, disons que l'état de votre application principale comporte un tableau d'utilisateurs et un tableau de fonctions de sécurité. "Sélectionner" vous permet d'obtenir une référence à un observable dont la valeur est uniquement ce groupe d'utilisateurs. Avant de vous lancer dans ngrx, vous devez vraiment étudier Observables et RXJS. J'ai trouvé cet article lié à la page principale du projet Github pour ngrx utile.

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

RXJS et redux peuvent être un sujet important, mais je vous suggère de travailler sur vos connaissances en petits morceaux. Il m'a fallu environ 2 mois de travail avant de vraiment me sentir à l'aise. Même si vous ne restez pas avec ngrx, comprendre le fonctionnement de RXJS est extrêmement utile et vaut la peine de perdre du temps à l’apprendre.

Voici un article de Gist qui donne également une bonne introduction à RXJS . https://Gist.github.com/staltz/868e7e9bc2a7b8c1f754

19
wiredprogrammer

Il retourne l'état appelé 'horloge'.

Voici un exemple. Dans le constructeur, store.select est appelé, cette fois avec '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');

...

APPStREDUCERS est indiqué dans le bootstrap.

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 correspond à tous les réducteurs définis. Le réducteur de todos est défini comme suit:

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

Il existe plusieurs façons de procéder. Vous pouvez créer une liste de tous vos réducteurs, en définissant essentiellement une série de clés d’objet faisant référence à un objet réducteur.

Store.select renvoie un observable auquel vous pouvez vous abonner dans votre composant ou votre modèle via "| async". 

2
Derek Kite

This.store.select ('keyname') renverra les données de l'objet store de la propriété 'keyname'. vous pouvez rechercher davantage un objet interne en magasin en utilisant plusieurs réducteurs avec StoreModule.forFeature ("master", masterReducer) dans le module principal avec createSelector

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