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

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!

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

~ Jose San Leandro

"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

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

8. Normalizing data

9. Testing Redux applications

10. Performance

11. Structuring Redux code

12. Redux beyond React


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