Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

egghead.io

Modernizing a Legacy Redux Application with React Hooks

via egghead.io

Overview

Many engineers working with redux have felt burdened by large amounts of boilerplate code and confusing indirection. These apps often rely on legacy patterns that are no longer recommended, but are still commonly found in production code bases. If you are are an engineer working on such an application, this course is for you. In it I will show you how to modernize your application, with react hooks, one component at a time. At the end of it, we'll still be using redux, but the structure and content of your code will be significantly improved.
We will cover migrating class components to functional components with react hooks and how to replace connect() with redux hooks. This course will serve as a good tutorial for learning react hooks. It will also help you apply modern patterns for using redux. These patterns, powered by the new useSelector and useDispatch hooks will transform your redux applications for the better.

Syllabus

  • Setup the Currency Conversion Calculator
  • Currency Conversion Calculator File Overview
  • Migrate a React Class Component to a Function Component
  • Migrate React Component State to the useState Hook
  • Create a Debounced Event Handler with the useMemo Hook
  • Migrating DOM refs from createRef() to useRef()
  • Replacing Instance Variables with the useRef Hook
  • Replacing Component Lifecycle Methods with the useEffect Hook
  • Replacing mapStateToProps with the useSelector Hook
  • Replacing mapDispatchToProps with the useDispatch Hook
  • Applying the useSelector and useDispatch Redux Hooks to Additional Components
  • Avoiding Accidental Re-Renders with the useCallback Hook
  • Saying Goodbye to the Redux connect() Method and Container Components
  • Cleaning up our Functional Components with Custom Hooks

Taught by

Jamund Ferguson

Reviews

4.8 rating at egghead.io based on 34 ratings

Start your review of Modernizing a Legacy Redux Application with React Hooks

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.