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

Part 11 – Async Status and Error Handling

Part 12 – Testing React

Part 13 – Testing Redux

Intro to Redux

Do I Need Redux?

Here Cory shows a line from simple to complex and explains that the best technology for the job depends on the complexity of what you are building. From simple to complex we have:

• Vanilla JS (simple, no setup)
• jQuery
• React
• React+Redux (significant setup required)

Cory explains that Redux is most useful for tackling:

• Complex data flows
• Inter-component communication
• Non-hierarchical data
• Many actions
• Same data in multiple places

“If you aren’t sure if you need it, you don’t need it.” – Pete Hunt on Flux and Redux

I also think Pete’s principle here could be applied to almost any framework.

Three Core Redux Principles

1. One immutable store
2. Actions trigger changes
3. Reducers update state

I recently saw Anna Doubkova talk about her experiences with Redux. She described Redux as Flux with Functional Programming, and recommended the following learning path:

1. Functional Programming
2. Flux
3. Redux

You can find all of the slide here: Redux in 3 steps

Also if you are curious about Functional Programming, read The Case for F#.

Flux Similarities

This clip is only for people who already know Flux. Cory has a short module on Flux in his course Building Applications with React and Flux.

Cory explains that both Flux and Redux help you handle state and data flows, in a unidirectional way:

• Data down
• Actions up

Flux Differences

There are some new concepts in Redux:

• Reducers
• Containers
• Immutability

For further details, see my React Redux notes on Jonas Ohlsson’s talk, or alternatively go straight to Jonas’s slides.

Based on all of this information, I am convinced that Redux has a superior, simpler design to the original Facebook Flux. I am certainly not the only one either.

Credit to Dan Abramov, but it’s also important to mention that numerous others have contributed, in fact over 300 developers are involved with this project. It is very much a community achievement.

Redux Flow Overview

Cory explains that a reducer is essentially just a fancy name for a functional that returns a new state, and that they typically use switch statements.

The Redux Store is updated with this returned value, and React is connected to this Store using React-Redux.

Do not think of Redux as part of React. It is a separate piece of software that can be plugged into a variety of other frameworks, for example see ng-redux.

Continue to Part 6 – Actions, Stores and Reducers