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 3 – React Component Approaches
Part 4 – Initial App Structure
Part 6 – Actions, Stores and Reducers
Part 7 – Connecting React to Redux
Part 10 – Async Writes in Redux
Part 11 – Async Status and Error Handling
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
- One immutable store
- Actions trigger changes
- 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:
- Functional Programming
- Flux
- 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