Redux in Action

by Marc Garreau, will faurot

Overview

Summary

With Redux in Action, you'll discover how to integrate Redux into your React application and development environment. With the insights you glean from the experience of authors Marc Garreau and Will Faurot, you'll be more than confident in your ability to solve your state management woes with Redux and focus on developing the apps you need!

Foreword by Mark Erikson, Redux co-maintainer.

Purchase of the print book includes a free eBook in PDF, Kindle, and ePub formats from Manning Publications.

About the Technology

With Redux, you manage the state of a web application in a single, simple object, practically eliminating most state-related bugs. Centralizing state with Redux makes it possible to quickly start saved user sessions, maintain a reliable state history, and smoothly transfer state between UIs. Plus, the Redux state container is fully programmable and integrates cleanly with React and other popular frameworks.

About the Book

Redux in Action is an accessible guide to effectively managing state in web applications. Built around common use cases, this practical book starts with a simple task-management application built in React. You'll use the app to learn the Redux workflow, handle asynchronous actions, and get your hands on the Redux developer tools. With each step, you'll discover more about Redux and the benefits of centralized state management. The book progresses to more-complex examples, including writing middleware for analytics, time travel debugging, and an overview of how Redux works with other frameworks such as Angular and Electron.

What's Inside

• Using Redux in an existing React application
• Handling side effects with the redux-saga library
• Consuming APIs with asynchronous actions
• Unit testing a React and Redux application

About the Reader

For web developers comfortable with JavaScript and React.

About the Author

Marc Garreau has architected and executed half a dozen unique client-side applications using Redux. Will Faurot is a mentor for Redux developers of all skill levels.

Table of Contents

1. Introducing Redux
2. Your first Redux application
3. Debugging Redux applications
4. Consuming an API
5. Middleware
6. Handling complex side effects
7. Preparing data for components
8. Structuring a Redux store
9. Testing Redux applications
10. Performance
11. Structuring Redux code
12. Redux beyond React

Product Details

ISBN-13:	9781638356257
Publisher:	Manning
Publication date:	05/11/2018
Sold by:	SIMON & SCHUSTER
Format:	eBook
Pages:	312
File size:	3 MB

About the Author

Marc Garreau has architected and executed half a dozen unique client-side applications leveraging Redux for state management.

Table of Contents

Foreword xv

Preface xvii

Acknowledgments xix

About this book xxi

About the authors xxv

About the cover illustration xxvi

1 Introducing Redux 1

1.1 What is state? 2

1.2 What is Flux? 3

Actions 4

Dispatcher 4

Stores 4

Views 4

1.3 What is Redux? 5

React and Redux 5

The three principles 6

The workflow 7

1.4 Why should I use Redux? 11

Predictability 12

Developer experience 12

Testability 12

Learning curve 12

Size 12

1.5 When should I use Redux? 12

1.6 Alternatives to Redux 13

Flux implementations 13

MobX 14

GraphQL clients 14

2 Your first Redux application 16

2.1 Building a task-management application 17

Designing the state shape 18

2.2 Using Create React App 19

Installing Create React App 19

2.3 Basic React components 20

2.4 Revisiting the Redux architecture 23

2.5 Configuring the Redux store 24

The big picture and the store API 24

Creating a Redux store 25

The tasks reducer 26

Default reducer state 26

2.6 Connecting Redux and React with react-redux 27

Adding the Provider component 28

Passing data from Redux to React components 28

Container and presentational components 30

2.7 Dispatching actions 31

2.8 Action creators 35

Using action creators 36

Action creators and side effects 38

2.9 Handling actions with reducers 38

Responding to actions in reducers 38

2.10 Exercise 40

2.11 Solution 41

The status drop-down 42

Dispatching an edit action 42

Handling the action in a reducer 45

3 Debugging Redux applications 47

3.1 Introducing the Redux DevTools 48

3.2 Time-travel debugging 49

3.3 Visualizing changes with DevTools monitors 50

3.4 Implementing the Redux DevTools 51

3.5 The role of Webpack 54

3.6 Hot module replacement 55

Hot-loading components 55

Hot-loading reducers 56

Limitations of hot module replacement 57

3.7 Preserving local state with React Hot Loader 57

3.8 Exercise 58

3.9 Solution 58

4 Consuming an API 60

4.1 Asynchronous actions 61

4.2 Invoking async actions with redux-thunk 63

Fetching tasks from a server 64

API clients 67

View and server actions 68

4.3 Saving tasks to the server 70

4.4 Exercise 72

4.5 Solution 72

4.6 Loading states 74

The request lifecycle 74

Adding the loading indicator 76

4.7 Error handling 80

Dispatching an error action 81

5 Middleware 86

5.1 What's in middleware? 87

5.2 Middleware basics 88

Composing middleware 89

5.3 Example: logging middleware 89

Creating the logger middleware 90

Using apply Middleware to register the middleware 91

5.4 Example: analytics middleware 93

The Meta property 93

Adding analytics middleware 94

Interlude: when and when not to use middleware 97

Case study: how not to use middleware 97

5.5 API middleware 100

The desired API 101

Outlining the API middleware 103

Making the AJAX call 105

Updating the reducer 106

Wrapping up API middleware 107

5.6 Exercise 107

5.7 Solution 108

6 Handling complex side effects 111

6.1 What are side effects? 112

6.2 Revisiting thunks 113

Strengths 113

Weaknesses 114

6.3 Introducing sagas 114

Strengths 115

Weaknesses 115

6.4 What are generators? 116

Generator syntax 116

Iterators 117

Looping with generators 118

Why generators? 118

6.5 Implementing sagas 119

Connecting saga middleware to the store 119

Introducing the root saga 120

Saga effects 122

Responding to and dispatching actions 123

6.6 Handling long-running processes 125

Preparing data 126

Updating the user interface 127

Dispatching an action 127

Writing long-running saga 128

Handling the action in the reducer 129

Using channels 129

6.7 Exercise 132

6.8 Solution 132

6.9 Additional side-effect management strategies 133

Asynchronous functions with async/awail 133

Handling promises with redux-promise 134

Redux-loop 134

Redux-observable 134

7 Preparing data for components 136

7.1 Decoupling Redux from React components 137

7.2 What are selectors? 139

7.3 Implementing search 140

Scaffolding out the UI 142

Local state versus Redux state 144

Dispatching filter action 145

Handling filter actions in reducer 147

Writing your first-selector 148

7.4 Introducing reselect 151

Deselect and memoization 151

Reselect and composition 152

7.5 Implementing reselect 152

7.6 Exercise 154

7.7 Solution 155

8 Structuring a Redux store 158

8.1 How should I store data in Redux? 159

8.2 An introduction to normalized data 161

8.3 Implementing projects with nested data 163

Overview: fetching and rendering projects 164

Updating the server with projects 166

Adding and dispatching fetchProjects 168

Updating the reducer 170

Updating map State To Props and selectors 172

Adding the projects drop-down menu 173

Editing tasks 177

Unnecessary rendering 179

Summary-nested data 180

8.4 Normalizing projects and tasks 181

Defining schema 182

Updating reducers for entities 184

Updating selectors 186

Creating tasks 187

Summary-normalized data 188

8.5 Organizing other types of state 189

8.6 Exercise 189

8.7 Solution 189

9 Testing Redux applications 192

9.1 Introduction to testing tools 193

What does Jasmine provide? 195

What does Jest provide? 196

Alternatives to Jest 196

Component testing with Enzyme 198

9.2 How does testing Redux differ from React? 198

9.3 Testing action creators 199

Testing synchronous action creators 199

Testing asynchronous action creators 200

9.4 Testing sagas 203

9.5 Testing middleware 205

9.6 Testing reducers 208

9.7 Testing selectors 209

9.8 Testing components 211

Testing presentational components 212

Snapshot testing 213

Testing container components 216

9.9 Exercise 221

9.10 Solution 222

10 Performance 224

10.1 Performance-assessment tools 225

Performance timeline 225

React-addons-perf 226

Why-did-you-update 226

React developer tools 228

10.2 React optimizations 229

Should Component Update 229

Pure Component 230

Pagination and other strategies 230

10.3 Redux optimizations 231

Connecting the right components 231

Top-down approach 231

Connecting additional components to Redux 233

Adding connect to Header and Tasks Page 235

Map State To Props and memoized selectors 239

Rules of thumb for advanced connect usage 240

Batching actions 241

10.4 Caching 243

10.5 Exercise 244

10.6 Solution 246

11 Structuring Redux code 251

11.1 Rails-style pattern 252

Pros 253

Cons 254

11.2 Domain-style pattern 254

Pros 255

Cons 256

11.3 Ducks pattern 257

Pros 259

Cons 260

11.4 Selectors 260

11.5 Sagas 260

11.6 Styles 261

11.7 Tests 261

11.8 Exercise and solutions 261

12 Redux beyond React 263

12.1 Mobile Redux: React Native 264

Handling side-effects 264

Network connectivity 265

Performance 265

12.2 Desktop Redux: Electron 266

Why native desktop? 266

How Electron works 266

Introducing Redux to Electron 268

12.3 Other Redux bindings 269

Angular 269

Ember 270

12.4 Redux without framework 271

12.5 Exercise and solutions 271

Appendix Installation 273

Index 277