Introduction to Redux

using Angular 2

by Gerard Sans (@gerardsans)

Google Developer Expert

Master of Ceremonies

International Speaker

Angular 2 Trainer

Community Leader



AngularConnect - Sept 27-28th



Dan Abramov


Main Features

  • Unidirectional data flow
  • Single Immutable State
  • Changes made only by reducers

Unidirectional data flow

Angular 2

Components Tree

source: blog

Components Tree

    <input><button>Add todo</button>
      <todo id="0" completed="false"><li>buy milk</li></todo>
    Show: <filter-link><a>All</a><filter-link> ... 

Adding a new Todo

  • Component subscribes to store
  • User dispatches action
  • Store executes rootReducer
  • Update View


      `<todo *ngFor="#todo of todos">{{todo.text}}</todo>`

export class TodoList implements OnDestroy {
  constructor(@Inject('AppStore') private appStore: AppStore){
    this.unsubscribe = this.appStore.subscribe(() => {
      let state = this.appStore.getState();
      this.todos = state.todos;
  private ngOnDestroy(){


// add new todo item
  type: ADD_TODO,
  id: 1,
  text: "learn redux",
  completed: false


const initialState = {
  todos: [],
  currentFilter: 'SHOW_ALL'

export function rootReducer(state = initialState, action){
  switch (action.type) {
    case TodoActions.ADD_TODO: 
      return { 
        todos: state.todos.concat({ 
          text: action.text,
          completed: action.completed }),
        currentFilter: state.currentFilter 
    default: return state;

New State

  todos: [{
    id: 1,
    text: "learn redux",
    completed: false
  currentFilter: 'SHOW_ALL'

Dumb Todo Component

  inputs: ['completed', 'id'],
  template: `
    <li (click)="onTodoClick(id)"
  changeDetection: ChangeDetectionStrategy.OnPush
export class Todo { 
    @Inject('AppStore') private appStore: AppStore, 
    private todoActions: TodoActions){ }

  private onTodoClick(id){


  • Built on top of Redux
  • Compatible w/ DevTools
  • Built on top of RxJS 5
  • Leverages Angular 2

Why use Redux?

Main Benefits

  • Simplified Development
  • Avoids complex dependencies
  • Performance


Introduction to Redux using Angular 2

By Gerard Sans

Introduction to Redux using Angular 2

Redux, now in version 3, has proved very successful. Inspired by Flux and Elm, is used to handle Application state and bind it to the User Interface. Redux is usually seen with React but it can be used separately. We are going to build a simple Application using Redux covering the basic use cases.

  • 4,136