Redux in Action
Marc Garreau and Will Faurot
Foreword by Mark Erikson
  • May 2018
  • ISBN 9781617294976
  • 312 pages
  • printed in black & white

Comprehensive, practical, does a great job of teaching many key topics for real-world Redux apps.

From the Foreword by Mark Erikson, Redux co-maintainer

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!

Table of Contents detailed table of contents

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.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

1.7. Summary

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 dropdown

2.11.2. Dispatching an edit action

2.11.3. Handling the action in a reducer

2.12. Summary

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. Summary

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

4.8. Summary

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

5.8. Summary

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.10. Summary

7. Preparing data for components

7.1. Decoupling Redux from React components

7.2. What are selectors?

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

7.8. Summary

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 dropdown 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

8.8. Summary

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. Connecting Redux and React with react-redux

9.5. Testing middleware

9.6. Testing reducers

9.7. Handling actions with reducers

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

9.11. Summary

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

10.7. Summary

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

11.9. Summary

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

12.6. Summary


Appendix A: Installation

A.1. Setting up a server

A.1.1. Installing and configuring json-server

A.2. Installing axios

A.3. redux-thunk

A.4. Configuring the Redux DevTools

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 authors

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.

Redux in Action (combo) added to cart
continue shopping
go to cart

combo $44.99 pBook + eBook + liveBook
Redux in Action (eBook) added to cart
continue shopping
go to cart

eBook $35.99 pdf + ePub + kindle + liveBook

FREE domestic shipping on three or more pBooks

The authors do a wonderful job of making the material compelling.

Jeremy Lange, Sertifi

Take control of your application state with expert Redux advice.

Ian Lovell, Parmenion Capital Partners

A perfect example of a book beating online resources.

Jose San Leandro, OSOCO