real world redux - web.jakoblind.noweb.jakoblind.no/real-world-redux-toc.pdf · real world redux...

4
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

Upload: others

Post on 22-May-2020

46 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Real world Redux - web.jakoblind.noweb.jakoblind.no/real-world-redux-toc.pdf · Real world Redux Jakob Lind Contents Introduction 5 Chapter 1 - The Redux basics 6 You know React,

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

Page 2: Real world Redux - web.jakoblind.noweb.jakoblind.no/real-world-redux-toc.pdf · Real world Redux Jakob Lind Contents Introduction 5 Chapter 1 - The Redux basics 6 You know React,

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

Page 3: Real world Redux - web.jakoblind.noweb.jakoblind.no/real-world-redux-toc.pdf · Real world Redux Jakob Lind Contents Introduction 5 Chapter 1 - The Redux basics 6 You know React,

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

Page 4: Real world Redux - web.jakoblind.noweb.jakoblind.no/real-world-redux-toc.pdf · Real world Redux Jakob Lind Contents Introduction 5 Chapter 1 - The Redux basics 6 You know React,

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