Welcome to Part 9 of this comprehensive review and summary of Cory House’s Pluralsight course Building Applications with React and Redux in ES6.

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.

Also in this series:

Part 1 – Introduction and Background

Part 2 – Environment Setup

Part 3 – React Component Approaches

Part 4 – Initial App Structure

Part 5 – Intro to Redux

Part 6 – Actions, Stores and Reducers

Part 7 – Connecting React to Redux

Part 8 – Redux Flow

Part 9 – Async in Redux

Part 10 – Async Writes in Redux

This Part describes the 10th module in the course, Async in Redux.

Async in Redux

Why a Mock API?

Cory recommends the Mock API pattern for any client side app project. He lists seven good reasons for doing this including:

• Start before the API exists
• Allows separate teams to work independently of each other
• Provides a backup plan if the API isn’t working
• Ultra-fast

Async Library Options

There are many libraries available for doing Asynchronous calls in Redux, such as:

• redux-thunk by Dan Abramov and 16 contributors
• redux-promise by Andrew Clark and 6 contributors
• redux-saga by Yassine Elouafi and 79 contributors

Cory gives a brief overview of each of these, explaining that redux-thunk returns functions from action creators, redux-promise returns flux standard actions and promises, and redux-saga uses ES6 generators and rich domain-specific language.

Cory says that redux-promise is currently the least popular out of the three above options, and so moves onto comparing Thunks and Sagas next.

We learn that thunks are clunky to test, whereas Sagas are relatively easy to test. However thunks are easier to learn than Sagas.

Cory recommends starting off with the easy to learn thunks and switching if you find it doesn’t meet your needs. This module of the course focuses on async with redux-thunk.

Dan Abramov has written an excellent response to this StackOverflow question on async which should give you a good overview of some ways of doing async in Redux.

Thunk overview

Here we see an example function that deletes an author asynchronously.

Cory explains that thunk is a computer science term. It was named thunk to mean ‘the past tense of “think” at two in the morning’, by Eric S Raymond.

Mock API Setup

There are three files in Cory’s pluralsight-redux-starter api and we now add these to our project.

Cory says that you do not need to understand the code in these files, but if you are interested he gives a description of mockCourseApi.js. It basically simulates the API calls with a 1 second response time.

Remove Inline Form

In this module we are restructuring our work to separate concerns:

Cory explains that coursesPage.js should be a container component and removes several sections of code from here.

Add Thunk to Store

We add redux-thunk to configureStore.js, applying it as middleware.

Create Load Courses Thunk

We write courseActions.js and import our mockCourseApi so that we are testing against a mock API. When we want to point to a real API we will need to update the import statement to point to the real API.

We rename our action creator to loadCoursesSuccess and update this.

Action Naming Conventions

Cory gives a couple of reasons why he prefers the Success suffix.

Load Courses in Reducer

This is a super simple switch statement in courseReducer.js

The next question is where and how do we fire this off on load?

Dispatch Action on Page Load

Cory uses a named import to loadCourses from actions/courseActions.

We create a reference to our store, and call the dispatch method on it:

store.dispatch(loadCourses())

When we run up our app we can see the list of courses displaying correctly, but we are only showing a portion of the data that we have.

So we will next build a dedicated component that displays this data better.

Create Course List Component

coursesPage.js is a container component, but it currently contains JSX markup code.

We create a new component called CourseList.js and another called CourseListRow.js

In this clip we see destructuring in action.

Our app is now looking much better, displaying hyperlinks to the courses, author names, categories and length.

This module has been all about asynchronously loading data onto the screen. The next one looks at updating our data asynchronously.

Continue to Part 10 – Async Writes in Redux