reducer

Adding Redux with NgRx/Store to Angular 2 – Part 1

The recent trend in state management has rise thanks to the popular library – Redux. I was very interested in integrating a redux solution to angular in my Echoes Player project. I followed few examples that I have found NgRx.js. These are my first steps with integrating it to Echoes.

Short Intro To Redux

UPDATED: RC.6, 9/1/2016

In a one liner – Redux implements the concept of state management using Flux design pattern. It does that using pure functions (reducers) that return a new state given a certain event (type of action) and its event data (payload of action).

The benefits of using Redux are:

  1. state is becoming predictable
  2. keeping logics detached from the rest of the application
  3. writing tests is easy
  4. Time Travel for any scenario becomes a breeze
  5. Components should become stateless

NgRx.js for Angular 2

NgRx.js is a library for state management inspired by Redux. It exposes few objects that implements the core concepts of Redux: Store, Action, Reducer and more.

Lets start adding NgRx to Echoes Player.

Creating the main Store

First, I created a new directory in “src/app/core/store” for defining the store. In this directory i’m defining the store, storing the reducers and defining the data model structure of Echoes.

The index.ts is:

In order to attach this store to the app, i’m importing it in the app.module.ts (i’m using the excellent Angular2Class angular2 starter kit) as such:

Creating a Reducer

The first reducer that I have created handles the videos search results. Currently, it handles 3 actions: add, remove and reset.

Notice how the “videos” function is a pure function: it gets 2 arguments and is expected to return a value.

The main (and currently only) action that is implemented here is the “add” action with addVideos function. The “addVideos” function simply returns a new array that includes a copy of the source array concatenated with a new videos array.

Using Store In Angular2 Component

In order to use the ngrx store in the “youtube-videos.ts” component, I need to import the Store – which is a “singletone” object, and inject it.

I also imported the “ChangeDetectionStrategy“, so I can instruct angular to evaluate changes once.

In order to use the result of the youtube search action, I attach the store’s reducer result to the “videos” property in this class. Since this operation is async, the template of youtube-videos component has been defined with a pipe of async:

Using Store in Angular2 Service

The real action of dispatching action to the store comes from the youtube.search service.

I first import the Store and the actions needed for new states:

Similarly to the youtube-videos component, the “Store” is injected to this service constructor and attached to the “this.store” context.

In order to update the store state, once the response is ready, the “ADD” event is dispatched with the expected payload:

This closes a circle and invokes the “videos” reducer mentioned above, which afterwards updates the youtube-videos components, which in turn, displays the current state of the “store.videos” property.

What’s Next

This is merely just the beginning of integrating NgRx to Echoes. Right after the start, I noticed the benefits of using it. There are more decisions to take in this project using ngrx as well as adding more reducers.

As always, Echoes is an open source project. The source code is available on github.

Thanks for reading :).