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