real world redux - web.jakoblind.noweb.jakoblind.no/real-world-redux-toc.pdf · real world redux...
TRANSCRIPT
Real world Redux
Jakob Lind
Contents
Introduction 5
Chapter 1 - The Redux basics 6
You know React, next step is Redux . . . . . . . . . . . . . . . 6
Redux has one global state called store . . . . . . . . . . 6
How React components gets the state from Redux . . . 8
Code your first Redux app . . . . . . . . . . . . . . . . . 9
Install Redux dependencies . . . . . . . . . . . . . . . . 12
Creating the Redux store and an empty reducer . . . . . 12
Connect to your React component . . . . . . . . . . . . 15
Actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
The Reducer . . . . . . . . . . . . . . . . . . . . . . . . . 20
Some reflections . . . . . . . . . . . . . . . . . . . . . . . . . . 22
One-way data flow - just like React . . . . . . . . . . . . 22
Redux separates what happens from how to change the
state . . . . . . . . . . . . . . . . . . . . . . . . . . 24
1
Chapter 2 - Connecting to React 26
Recap of how to use connect function . . . . . . . . . . . . . 26
The mysterious double parenthesis ()() . . . . . . . . . . . . . 28
The mapStateToProps function . . . . . . . . . . . . . . . . . 30
mapStateToProps decouples React from Redux . . . . . 32
The mapDispatchToProps function . . . . . . . . . . . . . . . 35
Presentational and container components . . . . . . . . . . . 37
Connecting to React in a larger app (many connects) . . . . . 39
A deep dive into the implementation of connect . . . . . . . 42
Connect gives us optimizations . . . . . . . . . . . . . . . . . 49
Chapter 3 - Reducers 49
Immutable data in JavaScript . . . . . . . . . . . . . . . . . . 50
One store - many types of state . . . . . . . . . . . . . . . . . 50
One action - many reducers . . . . . . . . . . . . . . . . . . . 53
File structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Reuse reducers with Higher-order reducers . . . . . . . . . . 56
Why does state in Reducers have to be immutable? . . . . . . 61
Do I have to use switch? . . . . . . . . . . . . . . . . . . . . . 64
Chapter 4 - Actions and Action creators 66
Action creators . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
What about constants as action types? . . . . . . . . . . . . . 68
Format of actions . . . . . . . . . . . . . . . . . . . . . . . . . 70
Flux Standard Action format . . . . . . . . . . . . . . . . . . . 72
Where to put the logic . . . . . . . . . . . . . . . . . . . . . . . 74
One user event - one redux action . . . . . . . . . . . . . . . . 74
2
Chapter 5 - Organizing state 76
What kind of data should go in the state? . . . . . . . . . . . . 77
Initializing state . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Normalizing state . . . . . . . . . . . . . . . . . . . . . . . . . 79
Derived state with selectors . . . . . . . . . . . . . . . . . . . 83
Should my state live in Redux or React? . . . . . . . . . . . . . 85
Chapter 6 - File structure 89
Redux-first . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
Domain-first . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Ducks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Chapter 7 - React patterns used in React-Redux 95
Higher-Order Component (HOC) . . . . . . . . . . . . . . . . 96
Real world use cases for HOC . . . . . . . . . . . . . . . 100
Combining HOCs . . . . . . . . . . . . . . . . . . . . . . 107
Use Presentational/container components to decouple Re-
dux from React . . . . . . . . . . . . . . . . . . . . . . . . 109
Presentational components . . . . . . . . . . . . . . . . 109
Container components . . . . . . . . . . . . . . . . . . . 110
Chapter 8 - Ajax with asynchronous actions 112
The limitation of synchronous action creators . . . . . . . . . 112
The three stages of an Ajax call . . . . . . . . . . . . . . . . . . 114
How to define your async actions types . . . . . . . . . . . . . 115
Thunk . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
Access state from action creator . . . . . . . . . . . . . . 121
Promise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
3
How to design the redux state for Ajax calls? . . . . . . . . . . 126
Metadata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
You don’t have to use Redux for all Ajax requests . . . . . . . 130
Should I use Thunk or Promise? . . . . . . . . . . . . . . . . . 132
Chapter 9 - Become more productive Redux dev 133
Reducing boilerplate . . . . . . . . . . . . . . . . . . . . . . . 133
Simpler syntax for mapDispatchToProps . . . . . . . . . 133
Use spread syntax in reducers . . . . . . . . . . . . . . . 135
Redux dev tools . . . . . . . . . . . . . . . . . . . . . . . . . . 136
How to debug with Devtools . . . . . . . . . . . . . . . . 137
Inspecting data . . . . . . . . . . . . . . . . . . . . . . . 138
4