Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is store.select in ngrx

I'm new to Redux and started with ngrx. I'm unable to understand the meaning of this line of code store.select:

 clock: Observable<Date>;  this.clock = store.select('clock'); 
like image 900
blackHawk Avatar asked Aug 12 '16 15:08

blackHawk


People also ask

What is select NgRx?

To read your application state in Redux, we need to use the select() method on @ngrx's Store class. This method creates and returns an Observable that is bound to a specific property in your application state. For example, here's how you would select the counter object: store.

What is a store in NgRx?

NgRx/store is a library for managing state in your Angular applications, it is a reactive state management library powered by RxJS. Similar to Redux, this library can be used to manage the flow of data throughout your application, when actions are dispatched, reducers act on them and mutate the store.

How does NgRx store work?

NgRx is made up of 5 main components - Store, Actions, Reducers, Selectors, and Effects. NgRx uses the Redux concept of unidirectional data flow, where all application data goes through the same lifecycle. This unidirectional data flow makes the application's state more predictable and thus easier to understand.

Where is NgRx store stored?

Where Does NgRx Store Data? NgRx stores the application state in an RxJS observable inside an Angular service called Store. At the same time, this service implements the Observable interface.


2 Answers

In very simple terms select gives you back a slice of data from the application state wrapped into an Observable.

What it means is, select operator gets the chunk of data you need and then it converts it into an Observable object. So, what you get back is an Observable that wraps the required data. To consume the data you need to subscribe to it.

Lets see a very basic example.

  1. Lets define the model of our store

    export interface AppStore {    clock: Date } 
  2. Import the Store into your component from '@ngrx/store'

  3. Create a store by injecting into the constructor

    constructor(private _store: Store<AppStore>){} 
  4. Select returns an Observable.

    So, declare the clock variable in your component as follows:-

    public clock: Observable<Date>; 

    Now you can do something like follows:-

    this.clock = this._store.select('clock'); 
like image 169
Mav55 Avatar answered Oct 14 '22 08:10

Mav55


Wow, this is a big topic. So basically "select" is really a RXJS operator that is used in this case to retrieve the value of a part of the application state object. So say your main app state has a array of users and a array of security functions. "Select" allows you to get a reference to a observable whose value is just that array of users. Before you get into ngrx you really need to study up on Observables and RXJS. I found this article linked off of the main Github project page for ngrx helpful.

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

RXJS and redux can be a big topic but I suggest working on your knowledge in small bite size chunks. It took me about 2 months of working with it before I really started to feel comfortable. Even if you don't stay with ngrx, understanding how RXJS works is incredibly useful and is worth the time investment to learn it.

Here is a gist article that also gives a good intro into RXJS. https://gist.github.com/staltz/868e7e9bc2a7b8c1f754

like image 38
wiredprogrammer Avatar answered Oct 14 '22 08:10

wiredprogrammer