Welcome to Part 7 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

In this part we review the 8th module in the course:

Connecting React to Redux

Container vs. Presentational Components

If you’ve been watching from the beginning you’ll be getting a little bit of deja vue here, but the slides and explanations are different and more focused on how they relate to Redux.

The most intriguing piece of news is Containers aren’t typically hand written, but generated from react-redux.

React-redux Introduction

Cory explains that you can use Redux with whichever framework you like. Here are some libraries that could be useful if you don’t work exclusively with React:

• ember-redux
• ng-redux
• Simplest Redux Example
• Aurelia-Redux
• Using Aurelia and Redux together for good times all round
• Backbone-Redux

React-redux consists of two main pieces:

• Provider – attaches app to store
• Connect – creates container components

Here we learn that it is the Connect part of React-Redux that alleviates us of the need to hand write our components.

Cory shows us the markup we use to connect our application to the Redux store, and explains how this works.

The Connect function wraps our component to the Redux store. We see an example of this, and Cory contrasts this to how we work with Flux.

We learn that Flux requires a fair amount of boilerplate code, but it is handled more elegantly with Redux’s connect function.

We pass two arguments into the connect function: mapStateToProps and mapDispatchToProps. Both of these are functions.

Benefits include no manual unsubscribe, and no required lifecycle methods. Cory describes these and others.

Also see Dan Abramov’s egghead lesson Generating Containers with connect() from React-Redux.

mapStateToProps

In this clip we look at the mapStateToProps function.

The initial description of what it does didn’t mean much to me, but then Cory shows some example code which is quite simple: we are just defining what state to make accessible to the component.

Cory will be showing more code examples in the next module.

Cory also discusses Reselect, the selector library for Redux, which offers memoization functionality. He explains how this is good for performance.

mapDispatchToProps

In this clip we look at the mapDispatchToProps function.

This lets us specify which actions we want to expose as props.

In this clip we see a code example of this, and Cory introduces bindActionCreators.

We learn that there are 3 ways to handle mapDispatchToProps

1. Ignore it. Use dispatch
2. Manually wrap
3. bindActionCreators

We see code snippets for these and learn some of the pros and cons of each approach.

A Chat with Redux

By way of illustration, Cory portrays each of the main players in React and Redux as people having a conversation with each other.

Silly though this is, I did find it helped me to understand and commit each of the roles to memory.

Woah! That was a lot of theory to absorb. Now is the time to put this into practice. In the next course module, and the next part in this series, we get coding!

Continue to Part 8 – Redux Flow