Using Redux with React: How to Better Scale your Web Applications
Learning to scale your React applications as complexity grows
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.
- 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.
- This git repository will contain all examples and exercises we will be completing: https://github.com/himynameisdave/safari-training-redux
- Make sure that you have Node installed on your machine (Node version 8.11.1 or higher) https://nodejs.org/en/
- I recommend using Node Version Manager for managing multiple versions of Node on the same system: https://github.com/creationix/nvm
- A text editor that you are familiar with using
- A web browser
About your instructor
The timeframes are only estimates and may vary according to how the class is progressing
- 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
- Reducer functions
- Selector functions
- 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