Welcome to Part 6 of this comprehensive review and summary of Cory House’s 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 10 – Async Writes in Redux

Part 11 – Async Status and Error Handling

Part 12 – Testing React

Part 13 – Testing Redux

Part 14 – Production Build

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

Actions, Stores, and Reducers

Actions

Actions are just plain objects that describe an event. Cory explains Action creators here.

Store

Creating the store is simple:

let store = createStore(reducer);

Cory explains the advantages of having only one store – a single source of truth.

The store API is also very simple:

• store.dispatch(action)
• store.subscribe(listener)
• store.getState()
• replaceReducer(nextReducer)

What Is Immutability?

Immutability is a simple concept: you can’t change the state without returning a new object.

Cory shows us that five of the seven primitive JS types are already immutable:

• Number
• String
• Boolean
• Undefined
• Null

We see examples of updating an object both using mutable state, and immutable state. Even if this concept isn’t yet fully clear, you will probably have used both of these forms of updates in your JavaScript many times before.

You may not, however, have used Object.assign() before, which is part of ES6.

Cory shows an example of this. Babel cannot transpile Object.assign to ES5, so if you use this you will need to use Babel-polyfill.

Why Immutability?

Cory lists and explains 3 main reasons to use immutable state:

• Clarity
• Performance
• Awesome Sauce

Cory’s explanation of performance also points at a greater simplicity. We can replace complex dirty checking code with a simple

if (previousStoreState !== storeState)

The explanation of “Awesome Sauce” is the amazing time travel debugging.

You really need to see this for yourself: here is Dan Abramov’s react-europe 2015 talk. In this talk he:

• Begins with a demonstration and explanation of how React Hot Loader works
• Begins talking about the problems with Flux 11 mins in.
• Introduces immutability at 12 mins, saying “it’s impossible to write powerful developer tools if you’re mutating state all over the place”
• Introduces Reducers at 16 mins
• Introduces Redux: Reducers + Flux = Redux
• Time Travelling demo at 19 mins
• Filtering the monitor at 25 mins
• Last demo in iOS Simulator with ReactNative
• Putting the fun into functional at 28 mins

Since Dan’s talk last year the tooling has evolved a lot further, and Cory shows some of the time travelling features available today in this clip.

Also it is worth knowing that Facebook have created Immutable JS, you don’t need to use it, but it’s good to know what’s there.

Handling Immutability

Whether you are writing your JavaScript ES6 or ES5 style, Cory explains your options. Here are some handy links:

• Stack Overflow: Difference between Lodash extend, assign and merge
• lodash.merge on npm
• object-assign polyfill on npm
• Facebook Immutability Helpers Docs

Cory also explains your options for enforcing Immutability.

• Leonardo Garcia Crespo’s redux-immutable-state-invariant

Cory also discusses Facebook’s Immutable JS here but found there is too much in there to fit into this already information packed course.

Reducers

Cory uses the meat grinder metaphor to explain reducers, or if you prefer the fluffy bunny metaphor.

We see an example that updates state using Object.assign.

We also learn what a “pure” function is in functional programming. For more on this see Eric Elliott’s What is a pure function?

Cory says that it is technically possible to create multiple Stores in Redux, but it’s not generally recommended.

We also learn which reducers are called when an item is dispatched and what goes on there.

Much of this information can also be learned from reading the Redux FAQ.

Now it’s almost time to get coding. We just first need to know how to hook up React with Redux.

Continue to Part 7 – Connecting React to Redux