O'Reilly logo
live online training icon Live Online training

Creating Robust React Apps with Redux

Managing Application State with the Flux Architecture

Shaun Wassell

Redux is state management at its best.

State management is one of the trickiest things to get right in large web applications. What’s the best way for components to share state? How do we prevent excessive props-drilling? Is there a way to make changes to the application’s state more predictable? These are some of the questions that many web developers struggle with, directly or indirectly, on a daily basis. Redux is an extremely effective tool that answers most of these questions in a very satisfactory way. That being said, incorporating Redux into an existing React application can be very difficult. In order to do so, you not only have to follow the setup process exactly, but even once you’ve setup Redux, it’s not at all obvious how to actually use Redux in the way it was intended. However, once a deeper understanding of Redux is gained, it becomes an incredibly powerful addition to your React application.

In this video, the learner will gain a deep understanding of Redux and how it works. We will discuss the basics of Redux, and then walk through the process of incorporating Redux into a React application.

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

  • The basics of Flux Architecture as seen in Redux
  • Adding and incorporating Redux into an existing React application
  • The different pieces of a Redux application, such as actions and reducers, and how to create them
  • Other additions to React that help maximize the benefits of Redux

This training course is for you because...

  • You’re currently working on a large React application
  • You’ve heard about Redux and want to understand how it works
  • You’re looking to add Redux to a React project

Prerequisites

  • Basic Knowledge of JavaScript
  • Basic Knowledge of React

Course Set-up

  • You’ll want to have the latest version of NPM and Node.js installed

Recommended Preparation

Recommended Follow-up

About your instructor

  • Shaun is a lifelong programmer and problem-solving addict. His goal is to help people build incredible software and solve meaningful problems by mastering the art of software development. He currently works as a Senior React Developer, but also has a lot of side gigs, including consulting, freelance development, and online education. Don’t hesitate to get in contact with him if you enjoy his materials.

Schedule

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

Overall Introduction (5 mins)

Learning Redux Basics (30 mins)

  • Learning how Redux works
  • Learning about Redux Actions
  • Learning about Reducers
  • Connecting Components to Redux
  • Q&A

Building a React App (45 mins)

  • Creating a new React app
  • Adding a TodoList Component
  • Adding a TodoListItem Component
  • Adding a NewTodoForm component
  • Styling our Components

Break (10 mins)

Adding Redux to React (63 mins)

  • Installing React
  • Setting up our Redux Store
  • Creating Redux Actions
  • Creating and Connecting a Reducer
  • Connecting the NewTodoForm Component to Redux
  • Connecting the TodoList Component to Redux
  • Q&A

Break (10 mins)

Using Selectors (37 mins)

  • Learning the Benefits of Selectors
  • Modifying our Redux Store
  • Installing reselect
  • Learning how to use the “createSelector” function
  • Creating selectors
  • Q&A

Redux Extras (40 mins)

  • Adding & Using Redux Dev-tools
  • Persisting the Redux Store
  • Learning Redux Best Practices
  • Q&A (5 mins)

Final Q&A (10 mins)

Course Wrap-up and Next Steps (10 mins)