Redux in Action
Marc Garreau and Will Faurot
  • MEAP began June 2017
  • Publication in May 2018 (estimated)
  • ISBN 9781617294976
  • 300 pages (estimated)
  • printed in black & white

It doesn't waste your time on slow tutorials you can find online.

Jose San Leandro

The "state" of a typical web application - the representation of its data at any given time - is stored in multiple data stores that must be individually monitored and maintained. The Redux JavaScript library consolidates state in a single object, radically simplifying one of the largest sources of bugs. Whether you're passing data through several layers of components or sharing and syncing data between unrelated parts of the app, Redux makes state management a breeze. Redux promotes predictability, testability, and the ability to debug your dynamic applications, letting you focus on building great apps. Redux is most closely associated with React.js, although you can use it with just about any framework, including Angular, Backbone, and Vue.js.

With Redux in Action, you'll discover how to integrate Redux into your React application and development environment. Starting by building a basic task management application, you'll dive into the Redux workflow, asynchronous actions, and the Redux developer tools. As you move through the practical examples inside, you'll also learn how to prepare data for components, write custom middleware, and optimize for performance. 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 to!

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

What's inside

  • Building with Redux and React
  • Writing custom Redux middleware
  • Handling complex side-effects using sagas
  • Enforcing data integrity by normalizing data
  • Unit testing a React and Redux application

About the reader

Written for web developers comfortable with JavaScript and ES6, as well as experience using React.

About the authors

Marc Garreau has architected and executed half a dozen unique client-side applications leveraging Redux for state management. Will Faurot is experienced in equal parts production Redux, and mentoring Redux developers of all skill levels.

Manning Early Access Program (MEAP) Read chapters as they are written, get the finished eBook as soon as it’s ready, and receive the pBook long before it's in bookstores.
MEAP combo $44.99 pBook + eBook + liveBook
MEAP eBook $35.99 pdf + ePub + kindle + liveBook

FREE domestic shipping on three or more pBooks

This is one of the best introductions I've seen to Redux - it successfully motivates why you should learn the library and teaches you how to use it at the same time.

Ryan Burrows

The authors really work to make sure that the readers fully understand the content and each part of the application.

Michael Stevens