Welcome to the final of this review of Cory House’s Pluralsight course Building Applications with React and Flux.

Cory is a Microsoft MVP in C#, founder of OutlierDeveloper.com, avid tech reader, and speaker.

He believes in clean code, pragmatic development, and responsive native UIs.
Building Applications with React and Flux is the prequel to Cory’s course Building Applications with React and Redux in ES6.

Also in this series:

Part 1 – Introductory Topics

Part 2 – Environment Setup

Part 3 – React Core Concepts

Part 4 – Creating Components Introduction

Part 5 – React Lifecycle

Part 6 – React Composition

Part 7 – React Router

Part 8 – React Forms

Part 9 – Flux

This episode explores the final module from this course

Flux Demos

Dispatcher

Cory creates a dispatcher directory in the project and puts appDispatcher.js inside it. This has just two lines of code in it. This is as simple as it gets.

Actions

Another directory, Actions, is created, with authorActions.js inside. We import appDispatcher.js and authorApi.js

We create a AuthorActions object with our action creator, createAuthor inside it.

We also create a constants directory with actionTypes.js in it.

Here we learn about a library that comes with React called keymirror. This automatically mirrors the values with the keys, so we only need to correctly type in the key names.

The action creator that we’ve just written tells the dispatcher to tell all the stores that an author was just created.

Stores: Change Listeners

We create authorStore.js, importing our dispatcher and actionTypes as well as Node’s EventEmitter.

Cory explains the object-assign package: a ponyfill for Object.assign() which copies the values of one object into another, resulting in an object containing the properties of both source objects.

Once we’ve also imported object-assign, we can create our new store.

Cory explains three core functions:

• addChangeListener
• removeChangeListener
• emitChange

Stores: Registration

Register with the dispatcher so that we’re notified when actions occur.

2 minutes into this clip, we’ve completed our boilerplate but haven’t created any code that’s specific to our purpose yet.

Cory says if you’re building a large app, you can use various design patterns to reduce the amount of boilerplate that you need.

Stores: Private Storage

Our store isn’t yet storing anything. To do this we push action.author data into our _authors object.

Stores: Interactions

We put our earlier work to use by updating ManageAuthorPage, replacing authorApi.getAuthorById with authorStore.getAuthorById.

Stores: Initialization

The list of authors isn’t displaying anymore, because we’ve moved to Flux and the stores no longer have the responsibility of getting the data on page load.

Cory shows how to generate an initialized action in main.js that passes the authorStore.

We start by creating initializeActions.js

Update Author Flow with Flux

Its now working, except we’ve broken editing authors.

Cory adds another constant UPDATE_AUTHOR, and creates a new action in authorActions.js

Adding Store Listeners

We want to stay on the same page and merely show updated data. We can achieve this by listening to store changes.

Delete Author via Flux

We update our AuthorList component to allow deleting an author.

Summary: Stepping Through Flux

Cory sets breakpoints at each of the steps, and we watch our data flow through the application:

1. authorList
2. authorActions
3. authorStore
4. authorPage

Final Challenge

Your challenge is to build the course management section.

To get yourself started, check out the following links:

courseApi.js

courseData.js

Course Complete!

If you would like to continue learning React JS with Cory House, check out his follow up course Building Applications with React and Redux in ES6.