Table of Contents

Copyright

Brief Table of Contents

Table of Contents

Foreword

Preface

Acknowledgments

About this book

About the authors

About the cover illustration

Chapter 1. Introducing Redux

1.1. What is state?

1.2. What is Flux?

1.2.1. Actions

1.2.2. Dispatcher

1.2.3. Stores

1.2.4. Views

1.3. What is Redux?

1.3.1. React and Redux

1.3.2. The three principles

1.3.3. The workflow

1.4. Why should I use Redux?

1.4.1. Predictability

1.4.2. Developer experience

1.4.3. Testability

1.4.4. Learning curve

1.4.5. Size

1.5. When should I use Redux?

1.6. Alternatives to Redux

1.6.1. Flux implementations

1.6.2. MobX

1.6.3. GraphQL clients

Summary

Chapter 2. Your first Redux application

2.1. Building a task-management application

2.1.1. Designing the state shape

2.2. Using Create React App

2.2.1. Installing Create React App

2.3. Basic React components

2.4. Revisiting the Redux architecture

2.5. Configuring the Redux store

2.5.1. The big picture and the store API

2.5.2. Creating a Redux store

2.5.3. The tasks reducer

2.5.4. Default reducer state

2.6. Connecting Redux and React with react-redux

2.6.1. Adding the Provider component

2.6.2. Passing data from Redux to React components

2.6.3. Container and presentational components

2.7. Dispatching actions

2.8. Action creators

2.8.1. Using action creators

2.8.2. Action creators and side effects

2.9. Handling actions with reducers

2.9.1. Responding to actions in reducers

2.10. Exercise

2.11. Solution

2.11.1. The status drop-down

2.11.2. Dispatching an edit action

2.11.3. Handling the action in a reducer

Summary

Chapter 3. Debugging Redux applications

3.1. Introducing the Redux DevTools

3.2. Time-travel debugging

3.3. Visualizing changes with DevTools monitors

3.4. Implementing the Redux DevTools

3.5. The role of Webpack

3.6. Hot module replacement

3.6.1. Hot-loading components

3.6.2. Hot-loading reducers

3.6.3. Limitations of hot module replacement

3.7. Preserving local state with React Hot Loader

3.8. Exercise

3.9. Solution

Summary

Chapter 4. Consuming an API

4.1. Asynchronous actions

4.2. Invoking async actions with redux-thunk

4.2.1. Fetching tasks from a server

4.2.2. API clients

4.2.3. View and server actions

4.3. Saving tasks to the server

4.4. Exercise

4.5. Solution

4.6. Loading states

4.6.1. The request lifecycle

4.6.2. Adding the loading indicator

4.7. Error handling

4.7.1. Dispatching an error action

Summary

Chapter 5. Middleware

5.1. What’s in middleware?

5.2. Middleware basics

5.2.1. Composing middleware

5.3. Example: logging middleware

5.3.1. Creating the logger middleware

5.3.2. Using applyMiddleware to register the middleware

5.4. Example: analytics middleware

5.4.1. The meta property

5.4.2. Adding analytics middleware

5.4.3. Interlude: when and when not to use middleware

5.4.4. Case study: how not to use middleware

5.5. API middleware

5.5.1. The desired API

5.5.2. Outlining the API middleware

5.5.3. Making the AJAX call

5.5.4. Updating the reducer

5.5.5. Wrapping up API middleware

5.6. Exercise

5.7. Solution

Summary

Chapter 6. Handling complex side effects

6.1. What are side effects?

6.2. Revisiting thunks

6.2.1. Strengths

6.2.2. Weaknesses

6.3. Introducing sagas

6.3.1. Strengths

6.3.2. Weaknesses

6.4. What are generators?

6.4.1. Generator syntax

6.4.2. Iterators

6.4.3. Looping with generators

6.4.4. Why generators?

6.5. Implementing sagas

6.5.1. Connecting saga middleware to the store

6.5.2. Introducing the root saga

6.5.3. Saga effects

6.5.4. Responding to and dispatching actions

6.6. Handling long-running processes

6.6.1. Preparing data

6.6.2. Updating the user interface

6.6.3. Dispatching an action

6.6.4. Writing a long-running saga

6.6.5. Handling the action in the reducer

6.6.6. Using channels

6.7. Exercise

6.8. Solution

6.9. Additional side-effect management strategies

6.9.1. Asynchronous functions with async/await

6.9.2. Handling promises with redux-promise

6.9.3. redux-loop

6.9.4. redux-observable

Summary

Chapter 7. Preparing data for components

7.1. Decoupling Redux from React components

7.2. What are selectors?

7.3. Implementing search

7.3.1. Scaffolding out the UI

7.3.2. Local state versus Redux state

7.3.3. Dispatching a filter action

7.3.4. Handling filter actions in a reducer

7.3.5. Writing your first selector

7.4. Introducing reselect

7.4.1. Reselect and memoization

7.4.2. Reselect and composition

7.5. Implementing reselect

7.6. Exercise

7.7. Solution

Summary

Chapter 8. Structuring a Redux store

8.1. How should I store data in Redux?

8.2. An introduction to normalized data

8.3. Implementing projects with nested data

8.3.1. Overview: fetching and rendering projects

8.3.2. Updating the server with projects

8.3.3. Adding and dispatching fetchProjects

8.3.4. Updating the reducer

8.3.5. Updating mapStateToProps and selectors

8.3.6. Adding the projects drop-down menu

8.3.7. Editing tasks

8.3.8. Unnecessary rendering

8.3.9. Summary—nested data

8.4. Normalizing projects and tasks

8.4.1. Defining a schema

8.4.2. Updating reducers for entities

8.4.3. Updating selectors

8.4.4. Creating tasks

8.4.5. Summary—normalized data

8.5. Organizing other types of state

8.6. Exercise

8.7. Solution

Summary

Chapter 9. Testing Redux applications

9.1. Introduction to testing tools

9.1.1. What does Jasmine provide?

9.1.2. What does Jest provide?

9.1.3. Alternatives to Jest

9.1.4. Component testing with Enzyme

9.2. How does testing Redux differ from React?

9.3. Testing action creators

9.3.1. Testing synchronous action creators

9.3.2. Testing asynchronous action creators

9.4. Testing sagas

9.5. Testing middleware

9.6. Testing reducers

9.7. Testing selectors

9.8. Testing components

9.8.1. Testing presentational components

9.8.2. Snapshot testing

9.8.3. Testing container components

9.9. Exercise

9.10. Solution

Summary

Chapter 10. Performance

10.1. Performance-assessment tools

10.1.1. Performance timeline

10.1.2. react-addons-perf

10.1.3. why-did-you-update

10.1.4. React developer tools

10.2. React optimizations

10.2.1. shouldComponentUpdate

10.2.2. PureComponent

10.2.3. Pagination and other strategies

10.3. Redux optimizations

10.3.1. Connecting the right components

10.3.2. A top-down approach

10.3.3. Connecting additional components to Redux

10.3.4. Adding connect to Header and TasksPage

10.3.5. mapStateToProps and memoized selectors

10.3.6. Rules of thumb for advanced connect usage

10.3.7. Batching actions

10.4. Caching

10.5. Exercise

10.6. Solution

Summary

Chapter 11. Structuring Redux code

11.1. Rails-style pattern

11.1.1. Pros

11.1.2. Cons

11.2. Domain-style pattern

11.2.1. Pros

11.2.2. Cons

11.3. Ducks pattern

11.3.1. Pros

11.3.2. Cons

11.4. Selectors

11.5. Sagas

11.6. Styles

11.7. Tests

11.8. Exercise and solutions

Summary

Chapter 12. Redux beyond React

12.1. Mobile Redux: React Native

12.1.1. Handling side-effects

12.1.2. Network connectivity

12.1.3. Performance

12.2. Desktop Redux: Electron

12.2.1. Why native desktop?

12.2.2. How Electron works

12.2.3. Introducing Redux to Electron

12.3. Other Redux bindings

12.3.1. Angular

12.3.2. Ember

12.4. Redux without a framework

12.5. Exercise and solutions

Summary

Installation

Setting up a server

Installing and configuring json-server

Installing axios

Redux Thunk

Configuring the Redux DevTools

Installing lodash

Installing Enzyme

Installation script

Index

List of Figures

List of Listings