@ngrx/store in 10 minutes

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.

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

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 ?

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!

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

Thanks, more coming soon! :)

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

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!

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

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

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 ?

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

great, thank you!

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?

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 ?

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 ???

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

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"

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

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

Same problem for me [default] Checking started in a separate process... [default] /Users/~/ngrx-store-in-ten/src/app/main.ts:2:10 Module '"/Users/~/ngrx-store-in-ten/node_modules/@angular/platform-browser-dynamic/index"' has no exported member 'bootstrap'. [default] /Users/~/ngrx-store-in-ten/src/app/main.ts:27: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'.