Short presentation on how to start using ngrx in your Angular 2 applications.

1. ngRx
Lazar Nikolov, Software Engineer @ CodeChem

2. ngRx
• ngRx - Angular Reactive Extensions
• @ngrx/store: RxJS powered state management for
Angular apps, inspired by Redux.
• npm install ——save @ngrx/core @ngrx/store
• https://github.com/ngrx/store

3. Setup
import { StoreModule } from '@ngrx/store';
import { todo } from ‘./reducers/todo';
@NgModule({
imports: [
…,
StoreModule.provideStore({todo: todo},
{todos: [], visibility: ‘ALL'}
)
]
})

4. Reducers
import { ActionReducer } from '@ngrx/store';
export const todo: ActionReducer<any> = (state={todos: [], visibility: 'ALL'}, action) => {
switch (action.type) {
case 'ADD_TODO':
…
case 'TOGGLE_TODO':
…
case 'FILTER_TODOS':
…
default:
return state;
}
};

5. Dispatching
import { Store } from '@ngrx/store';
@Component({…})
export class AppComponent implements OnInit {
constructor(private _store: Store<any>) {
}
submitTodo(todo) {
this._store.dispatch({
type: 'ADD_TODO',
payload: {
id: ++this.id,
value: todo,
status: 'ACTIVE'
}
});
}
}

6. Receiving
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs/Observable';
@Component({…})
export class TodoListComponent implements OnInit {
public todos: Observable<any>;
constructor(private _store: Store<any>) {}
ngOnInit() {
this._store.subscribe(data => {
this.todos = data;
});
}
}

7. DEMO!