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 3 – React Component Approaches
Part 4 – Initial App Structure
Part 10 – Async Writes in Redux
Part 11 – Async Status and Error Handling
In this part we review the 7th module in the course:
Actions, Stores, and Reducers
Actions are just plain objects that describe an event. Cory explains Action creators here.
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:
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:
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.
Cory lists and explains 3 main reasons to use immutable state:
- 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.
- 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.
Cory also discusses Facebook’s Immutable JS here but found there is too much in there to fit into this already information packed course.
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