@ngrx/store in 10 minutes

InstructorBrian Troncone

Share this video with your friends

Send Tweet

@ngrx/store builds on the concepts made popular by Redux and supercharges it with the backing of RxJS. The result is a tool and philosophy that will transform the way you approach state management in your Angular 2 applications. This lesson takes an existing Angular 2 app and refactors it to utilize @ngrx/store, touching on all of the major concepts along the way!

Free Community Resource

A Community Resource means that it’s free to access for all. The instructor of this lesson requested it to be open to the public.

Michael Peake
Michael Peake
~ 5 years ago

It would be nice if the original code (i.e. the starting point for the video) was available so that it was possible to follow along with the changes. The code on the Git repo appears just to be the finished version, even exploring the commits.

Brian Troncone
Brian Troncone(instructor)
~ 5 years ago

Good suggestion, I'll push a branch up today with original code before refactor.

Update: You can now access code before refactor in 'original' branch. :)

Samir Medjdoub
Samir Medjdoub
~ 5 years ago

Great practical example on many things I studied recently on RxJS, reducers, pure functions etc plus ngrx. The only issue when trying to install the app from your repo is this error:

Cannot resolve module 'rxjs/BehaviorSubject'
C:\sandbox\angular2\ngrx-store-in-ten\node_modules@ngrx\store\ng2.d.ts (1,39): error TS2307: Cannot find module '@angular/core'

I guess it's due to ngrx depending on angular 2 RC, not on Angular 2 beta anymore ?

Brian Troncone
Brian Troncone(instructor)
~ 5 years ago

I apologize, it looks like I left a ^ in the ngrx/store dependency. The current versions of store depend on Angular RC, causing the issue. I have updated the package.json file in the repo to fix this problem. Thanks for watching!

Samir Medjdoub
Samir Medjdoub
~ 5 years ago

Great thanks, that was the issue. I really have to remember these "^" and other "~" on npm packages. Looking forward to seeing your next videos :)

Brian Troncone
Brian Troncone(instructor)
~ 5 years ago

Thanks, more coming soon! :)

Jeff
Jeff
~ 5 years ago

I've have tried to get this to work over and over and always get the following error at npm start:

ERROR in ./src/app/main.ts (48,19): error TS2339: Property 'filter' does not exist on type '{}'.

ERROR in Path must be a string. Received undefined webpack: bundle is now VALID.

Can't debug/play with this at all due to this issue

Brian Troncone
Brian Troncone(instructor)
~ 5 years ago

Looking into this now, I apologize for the inconvenience.

Edit: This should now be resolved. I also went ahead and upgraded to @ngrx/store 2.0 w/ Angular RC.1. Thanks for the heads up!

asvifi85
asvifi85
~ 5 years ago

You are storing in memory on client side , How do ajax or rest call to save the newly added items in server database

Brian Troncone
Brian Troncone(instructor)
~ 5 years ago

For a more robust example, including making REST calls, caching data, etc. I suggest checking out the official ngrx example app. This is a great guideline to build off of for your ngrx based applications. Good luck! https://github.com/ngrx/example-app

DANIEL Pride
DANIEL Pride
~ 4 years ago

I am struggling to understand why when you have tailored sql database calls why you would use this ? What is the advantage, reduced server calls ?

Brian Troncone
Brian Troncone(instructor)
~ 4 years ago

Hello, thanks for watching! Check out the redux docs for an excellent overview on why this pattern is so useful in complex JavaScript apps. http://redux.js.org/docs/introduction/Motivation.html

Erkan Buelbuel
Erkan Buelbuel
~ 4 years ago

great, thank you!

Seth Koch
Seth Koch
~ 3 years ago

It's always fun to pay 40 dollars for a video that is out of date.

Ian Smith
Ian Smith
~ 3 years ago

I just downloaded the code to run and followed the instructions. npm install ran fine. However, when I issue the npm start command I get the following errors: "webpack: Compiled successfully. [default] Checking started in a separate process... [default] C:/Dev/Egghead/ngrx-store-in-ten/src/app/main.ts:2:9 Module '"C:/Dev/Egghead/ngrx-store-in-ten/node_modules/@angular/platform-browser-dynamic/index"' has no exported member 'bootstrap'. [default] C:/Dev/Egghead/ngrx-store-in-ten/src/app/main.ts:33:2 Argument of type '{ selector: string; template: string; directives: (typeof PersonList | typeof PersonInput | typeo...' is not assignable to parameter of type 'Component'. Object literal may only specify known properties, and 'directives' does not exist in type 'Component'.

Any clues as to why I'm seeing these errors?

Bhaumik
Bhaumik
~ 3 years ago

I can see two dispatch one for people and another one for the filter as below:

  1. this._store.dispatch({type: "ADD_GUESTS"})

  2. this._store.dispatch({type: filter})

we have two different reducers in our code with different switch case so how above code will decide which reducer to choose ?

Bhaumik
Bhaumik
~ 3 years ago

As per above code, there are 2 reducers. one for handling list and other one is for sorting.

when you use this.store.dispatch({type: 'ADD_GUEST'}) and this.store.dispatch({type: filter}). How component function identifies which dispatch is for which reducer ???

Jason Kendall
Jason Kendall
~ 3 years ago

Having problems with this code build. I've installed all the exact dependencies as specified in the package.

<pre> [default] Checking started in a separate process... [default] /Applications/MAMP/htdocs/sandbox2017/egghead/ngrx-store-in-ten/src/app/main.ts:2:10 Module '"/Applications/MAMP/htdocs/sandbox2017/egghead/ngrx-store-in-ten/node_modules/@angular/platform-browser-dynamic/index"' has no exported member 'bootstrap'. [default] /Applications/MAMP/htdocs/sandbox2017/egghead/ngrx-store-in-ten/src/app/main.ts:33:2 Argument of type '{ selector: string; template: string; directives: (typeof PersonList | typeof PersonInput | typeo...' is not assignable to parameter of type 'Component'. Object literal may only specify known properties, and 'directives' does not exist in type 'Component'. [default] Checking started in a separate process... [default] /Applications/MAMP/htdocs/sandbox2017/egghead/ngrx-store-in-ten/src/app/main.ts:2:10 Module '"/Applications/MAMP/htdocs/sandbox2017/egghead/ngrx-store-in-ten/node_modules/@angular/platform-browser-dynamic/index"' has no exported member 'bootstrap'. [default] /Applications/MAMP/htdocs/sandbox2017/egghead/ngrx-store-in-ten/src/app/main.ts:33:2 Argument of type '{ selector: string; template: string; directives: (typeof PersonList | typeof PersonInput | typeo...' is not assignable to parameter of type 'Component'. Object literal may only specify known properties, and 'directives' does not exist in type 'Component'. </pre>
danilo
danilo
~ 3 years ago

The original branch doesn`t seem to work I get errors when running NPM install :

ngrx-store-in-ten@0.0.2 typings-install D:\Projects\ngrx-store-in-ten typings install

'typings' is not recognized as an internal or external command, operable program or batch file.

npm ERR! Windows_NT 10.0.15063 npm ERR! argv "D:\Program\nodejs\node.exe" "D:\Program\nodejs\node_modules\npm\bin\npm-cli.js" "run" "typings-install"

Recep Can
Recep Can
~ 3 years ago

Concepts may be same, but implementation is diffrent now. Please update this video.

Oktay Bilgin
Oktay Bilgin
~ 3 years ago

Very good explanation... you got talent...