javascript - example - Que es store.select en ngrx

ngrx tutorial español

Question

Soy nuevo en Redux y empecé con ngrx. No puedo entender el significado de esta línea de código store.select :

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

Answer 1

Devuelve el estado llamado ''reloj''.

Aquí hay un ejemplo. En el constructor se llama store.select, esta vez con ''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'');

...

En el bootstrap, se proporciona provisión de 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 es todos los reductores definidos. El reductor de todos se define de la siguiente manera:

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

Hay algunas formas de hacerlo, y puede componer una lista de todos sus reductores, esencialmente definiendo una serie de claves de objeto que se refieren a un objeto reductor.

Store.select devuelve un observable al que puede suscribirse en su componente o plantilla a través de ''| async''.

Answer 2

En términos muy simples, la selección le devuelve una porción de datos del estado de la aplicación envuelto en un Observable.

Lo que significa es que el operador selecto obtiene la porción de datos que necesita y luego la convierte en un objeto observable. Entonces, lo que obtienes es un Observable que envuelve los datos requeridos. Para consumir los datos necesitas suscribirte.

Veamos un ejemplo muy básico.

1. Permite definir el modelo de nuestra tienda.

   interfaz de exportación AppStore {reloj: Fecha}

2. Importe la tienda a su componente desde ''@ ngrx / store''

3. Crea una tienda inyectando en el constructor.

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

4. Seleccione devuelve un observable.

   Por lo tanto, declare la variable de reloj en su componente de la siguiente manera:

   public clock: Observable<Date>;

   Ahora puedes hacer algo como lo siguiente:

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

Answer 3

This.store.select (''keyname'') devolverá los datos del objeto de almacén de la propiedad ''keyname''. puede buscar objetos internos en la tienda usando el reductor múltiple con StoreModule.forFeature ("master", masterReducer) en el módulo principal con createSelector

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

Answer 4

Wow, este es un gran tema. Básicamente, "seleccionar" es realmente un operador RXJS que se utiliza en este caso para recuperar el valor de una parte del objeto de estado de la aplicación. Así que diga que el estado de su aplicación principal tiene una gran variedad de usuarios y una variedad de funciones de seguridad. "Seleccionar" le permite obtener una referencia a un observable cuyo valor es solo esa matriz de usuarios. Antes de entrar en ngrx, realmente necesita estudiarse en Observables y RXJS. Encontré este artículo vinculado fuera de la página principal del proyecto Github para ngrx útil.

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

RXJS y redux pueden ser un gran tema, pero sugiero trabajar en su conocimiento en porciones pequeñas. Me tomó cerca de 2 meses de trabajar con él antes de que realmente empecé a sentirme cómodo. Incluso si no te quedas con ngrx, entender cómo funciona RXJS es increíblemente útil y vale la pena invertir el tiempo para aprenderlo.

Aquí hay un artículo esencial que también proporciona una buena introducción a RXJS. https://gist.github.com/staltz/868e7e9bc2a7b8c1f754