How to build fast, robust, predictable data-driven apps

And enjoy doing this

@ngVikingsConf

Follow Twitter

March 1-2, Helsinki, Finland

3

3

Action

Dispatcher

Store

View

Action

Maintains

app state

3

https://gist.github.com/gaearon/ffd88b0e4f00b22c3159

slim-redux.js: 99-liner

Action

Store

View

Reducer

interaction

dispatch action

new state

state, action

current state

Performance

Coherence

1.

2.

3.

reactjs / redux

angular-redux / store

ngrx / store

=

+

Staying consistent with the Angular architecture

Applying reactive middleware

1.

2.

3.

export interface State {
  messages: MessageReducer.State,
  ui: UiReducer.State;
}

export interface State {
  items: Message[],
  searchQuery: string
}

const initialState: State = {
  items: [],
  searchQuery: 'ngrx'
};

export interface State {
  testPanelOpen: boolean
}

const initialState: State = {
  testPanelOpen: false
};

import { Action } from '@ngrx/store';

export const CLOSE_TEST_PANEL = '[UI] Close Test Panel';
export const OPEN_TEST_PANEL = '[UI] Open Test Panel';

export class CloseTestPanel implements Action {
    readonly type = CLOSE_TEST_PANEL;
}
...

export type All = CloseTestPanel | OpenTestPanel;

export class Add implements Action {
    readonly type = ADD;

    constructor(public payload: Message) { }
}

export class SearchSuccess implements Action {
    readonly type = SEARCH_SUCCESS;

    constructor(public payload: Message[]) { }
}

export function reducer(state = initialState, action: action): State {
  switch(action.type) {
    case MessageActions.ADD: {
      return ...
    }

    case MessageActions.SEARCH: {
      return ...
    }

    case MessageActions.SEARCH_SUCCESS: {
      return ...
    }

    default: {
      return state;
    }
  }
}

case MessageActions.SEARCH_SUCCESS: {
  return {
    ...state,
    items: state.items.concat(action.payload)
  };
}

Only non-mutating methods!

• copyWithin
• fill
• pop
• push
• reverse

• shift
• sort
• splice
• unshift

• ...
• concat
• slice
• filter
• map

VS

export const ROOT_REDUCER = {
  messages: MessageReducer.reducer,
  ui: UiReducer.reducer
};

import { StoreModule } from '@ngrx/store';
import { ROOT_REDUCER } from './states/reducers';
...
@NgModule({
  imports: [
    StoreModule.provideStore(ROOT_REDUCER),
    ...
  ],
  ...
})

import { Store } from '@ngrx/store';
import * as ApplicationStore from './../states/reducers';
...

export class MessageStatusComponent implements OnInit {

  messagesNumber$: Observable<number>

  constructor(private store: Store<ApplicationStore.State>) {
    this.messagesNumber$ = 
        this.store.select(store => store.messages.items.length);
  }

}

{{ messagesNumber$ | async }}

this.store.select(store => store.messages.items.length)

this.store.select(ApplicationStore.selectMessagesNumber)

export function selectMessagesNumber(state: State) {
  return state.messages.items.length
}

this.store.dispatch({
    type: MessageActions.ADD,
    payload: {
        author: messageForm.value.author,
        text: messageForm.value.text,
        createdAt: new Date()
    }
});

searchMessages(searchString: string) {

  this.store.dispatch( ...SEARCH... );

  this.messageService.searchMessages(searchString)
    .subscribe(
    messages => {
      this.store.dispatch( ...SEARCH_SUCCESS... );
    });
}

constructor(private messageService: MessageService) { }

All interaction with outside world: HTTP, WebSockets,

Storage, etc

Centralizing all asynchronous work

1.

2.

3.

@Injectable()
export class MessageEffects {
  @Effect()
  search$: Observable<Action> = this.actions$.ofType(MessageActions.SEARCH)
    .map((action: MessageActions.Search) => action.payload)
    .switchMap(searchQuery => this.messageService.searchMessages(searchQuery))
    .map(results => new MessageActions.SearchSuccess(results));
    
  constructor(private actions$: Actions, private messageService: MessageService)
  {}
}

import { Effect, Actions } from '@ngrx/effects';

{ type: 'SEARCH' }
{ type: 'SEARCH_SUCCESS', items: { ... } }
{ type: 'SEARCH_FAILURE', error: 'Oops' }

Action

Effect

Action Success

Action Failure

import { EffectsModule } from '@ngrx/effects';
import { MessageEffects } from './states/message.effects';
...
@NgModule({
  imports: [
    EffectsModule.run(MessageEffects),
    ...
  ],
  ...
})

searchMessages(searchString: string) {
  this.store.dispatch({
    type: MessageActions.SEARCH,
    payload: searchString
  });
}

Time Traveling (really!)

Save and Restore state

1.

2.

3.

import { StoreDevtoolsModule } from '@ngrx/store-devtools';
...
@NgModule({
  imports: [
    storeDevtoolsModule.instrumentOnlyWithExtension({
      maxAge: 5
    }),
    ...
  ],
  ...
})

ngrx/router-store to connect with Angular router

Composing Reducers to apply Middleware

1.

2.

3.

Use reactjs/reselect to create efficient Selectors

Use CLI's environment feature to conditionally wire up store/devtools

1.

2.

3.

Great performance

Awesome developer experience

1.

2.

3.