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 4 – Creating Components Introduction
This episode explores the final module from this course
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.
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:
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.
We put our earlier work to use by updating ManageAuthorPage, replacing authorApi.getAuthorById with authorStore.getAuthorById.
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:
Your challenge is to build the course management section.
To get yourself started, check out the following links:
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.