An Intro to ngrx/effects , ngrx/store with Angular 4

Let’s build a simple blog app using angular CLI, ngrx/store and ngrx/effects for state management. Our sample app can save a new blog to the database with title and author, select an author from the filters drop down and has an option to remove a blog from the database. This blog post assumes that you have some familiarity with angular-cli, redux concepts and RxJS. I will not go into full detail on how to set up the angular UI components (container/presentation). You can get the full code here.

REST API Service Setup

Since the focus of this app is ngrx, and to speed up the front-end development time I decided to use json-server as my REST API service. With json-server, we can set up a fake REST API service for CRUD operations with bare minimum configuration.

To install json-server, open the command line and run:

npm install -g json-server

Next, let’s create a JSON file with name db.json. I have added some sample entries for blogs and authors as show below.

Let’s start the JSON server by running the command: