The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

@ngrx/store in 10 minutes

@ngrx/store in 10 minutes

10:49
@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!
Watch this lesson now
Avatar
egghead.io

@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!

Avatar
Michael Peake

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.

Avatar
Brian

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. :)

In reply to Michael Peake
Avatar
Samir

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 ?

Avatar
Brian

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!

In reply to Samir
Avatar
Samir

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

In reply to Brian
Avatar
Brian

Thanks, more coming soon! :)

In reply to Samir
Avatar
Jeff

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

Avatar
Brian

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!

In reply to Jeff
Avatar
asvifi85

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

Avatar
Brian

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

In reply to asvifi85
Avatar
DANIEL

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 ?

In reply to Brian
Avatar
Brian

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

In reply to DANIEL
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?