O'Reilly logo
live online training icon Live Online training

Using Redux with React: How to Better Scale your Web Applications

Learning to scale your React applications as complexity grows

Dave Lunny

Component-driven UI frameworks such as React are now extremely common in JavaScript. As you start to scale your React apps, you may find that state becomes difficult to manage if you are handling complex user interactions and requesting data from a server. If you and your team are running into these issues and would like to see how Redux can help, then this training is for you!

Redux (which is based on the Flux architecture created by the team at Facebook) follows a very simple paradigm built around the concept of unidirectional data flow. This makes it easy to follow what is happening in your application, and easier to debug when things break. In this training, we will dive into why a library such as Redux is helpful and the problems that it solves, learn it’s API and how to “think in Redux”, and will spend a great deal of time learning use Redux in your React application.

What you'll learn-and how you can apply it

  • Understand why we should think about state as the backbone of our application, and understanding what problems are solved by having a unified system for managing state, where data is immutable and only flows in one direction.
  • Learn all about how Redux works, and how to use it in a real web application. We will cover how to dispatch actions, using reducers to derive new state, as well as using middleware to extend Redux (including writing our own middleware).
  • Learn how to apply Redux to a React app, along with many advanced techniques such as using selectors and improving rendering performance.

This training course is for you because...

  • You’re a front-end engineer who wants to simplify the way data flows through the web applications that you build.
  • You want to understand the underlying concepts of unidirectional data flow, so that even without a state management library like Redux, you will understand how to structure an application around this model.
  • You work on a large team/on a large-scale application, and perhaps there is no standardized way of handling common patterns (such as requesting data from a server, or autosaving a rich user text input form), and you would like to learn more about common patterns around managing application state.

Prerequisites

  • A working knowledge of modern JavaScript (ES6+), as well as some basic CSS/HTML knowledge.
  • A basic understanding of Git (mostly just being able to clone a repository).
  • Understanding of common web development best practices, specifically the benefits of building reusable UI components.
  • A basic knowledge of the React JavaScript framework is beneficial.

Course Set-up:

Recommended Preparation:

This is a good overview of unidirectional data flow (video)

Recommended Follow-up:

About your instructor

  • Dave is a web developer and open-source JavaScript contributor based in Vancouver, BC. He is currently employed as a product developer at 7Geese, where he has been working with React and Redux on a daily basis for around 2 years now. Before that, Dave worked various contract positions where he led the development of several Redux-based web projects from the ground up. He is super passionate about JavaScript, and is extremely excited about its usage both in the browser and its potential well beyond the browser.

Schedule

The timeframes are only estimates and may vary according to how the class is progressing

Segment One: Managing Application State in JavaScript (30 mins)

  • Provide and overview of when a library like Redux should and shouldn’t be used.
  • Talk about what Redux is (and what it isn’t).
  • Discuss the need for a simplified state management container such as Redux.
  • Activity: Examine and discuss examples of existing web apps, specifically going over how their state could be represented.

Segment Two: Using Redux (60 mins)

  • Simplified state trees
  • Actions
  • Reducer functions
  • Selector functions
  • Middleware
  • Activity: Building up a small web application using Redux to manage state
  • Break + Q&A: 15 mins

Segment Three: Using Redux with React (90 mins)

  • Using <Provider />
  • Creating Redux-connected components
  • Using Selectors and Reselect
  • Async Actions
  • Debugging your Redux app
  • Activity: Take an existing async React application and apply Redux to it
  • Break + Q&A: 15 mins