Let’s Make a Tiny Gradebook with Angular2: Redux

Source Code

What’s New

Today I added Redux to the app. If you know what Redux is great! If you don’t, then I recommend you read the Three Principles. I also did a bit of work on the login page CSS… but nothing interesting. So let’s talk about how to Redux up and running with ngrx/store

Installation

Since we’ve yet to install a third-party lib, now’s a great time to go over how to do that. Let’s install ngrx/store! Woooo! 

  1. Install it!

2. The CLI creates a build in a folder called ‘dist’. That means you need to tell the CLI to put your new shiny lib into that folder. To do that you open up the ‘angular-cli-build.js’ file and add the libs folder name into the array. In this case I want everything in the ‘@ngrx’ folder.

3. Map the import alias in the system-config.json

4. Tell the typescript compiler how to compile it. You do this in the same system-config.json file as above. 

More info here.

Depending on what your default module is, you may have to add a third ‘format’ option to the below. By default, the format is whatever is set in the ‘tsconfig.json’ file. Luckily, the CLI defaults to commonJS and since ngrx/store was built with commonJS we don’t need to set the format. Here’s an example if we did need to set it though

 

Now that everything is installed, let’s use it.

First up we need to add the Redux provider. It’s a pretty simple matter. Import the ngrx store “provideStore” and pass it into the bootstrap function. This will give every component access to the store variable. You’ll it again later.

You might have cleverly noticed that the provideStore is actually… a function!!! It takes in an object that points to the different reducers. Here I am passing in the authenticationReducer, which I’ll reference later.

Speaking of reducers… 

This is the authenticationReducer. There pretty simple to make. The big thing to follow is the second point on Redux’s three principles. The state is READ ONLY. Always return a new state. If that means you have to copy this huge ungodly object, then so be it. 

The big things here are…

  • Setting some action type constants, which I’ll show in a bit.
  • Setting the default state, new User() in this case.
  • And then the code to handle each action type. (LOGIN/LOGOUT)
  • Finally you should have a default state that simply returns the current state.

Now let’s actually use it!

You’ll have to import all the necessities. The Observable is only required if you’re going to be pulling/listening to data from your store. That is, the component is only dispatching data, not retrieving. Since I wanted to demo how you could retrieve data, I added it. 🙂

In the constructor you should pull in the store service that you provided via the bootstrap function. Then, to send data, you call dispatch on the store. The parameters of that function is an object which should contain the type and payload. In may case there is no payload.

Now if you want to listen for data in a store, say you were doing the infamous ToDo list, you need to first create an Observable object. In the example above I created one called “user”. Then call the select function on the store object. The function takes in the name of the store you want, and returns an observable of that store. In this case, the variable “user” is an observable on the store “authentication”. Then you simply subscribe to that observable like you would any other. It will immediately trigger sending the stores current state. Then after it will trigger when the store changes.

Now let’s test it. 🙂

Screenshot

Success!
You can see it fire when I first subscribe. 
Then I login which does a dispatch on the store which the observable then picks up.  
Huzzah!

Wrap-Up

This isn’t the greatest example, but I think you’ll see how it can be awesome. Redux is a great way to compartmentalized your app data while providing a simple pub/sub model. Many funs can be had with it. With that…

Thanks for reading!

Facebooktwittergoogle_plusredditpinterestlinkedinby feather