Modernizing a Legacy Redux Application with React Hooks
Offered By: egghead.io
Course Description
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.
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
Related Courses
Design 1o1 Redux - Part 1: MyselfAbadir - Accademia di Belle Arti via iversity React Router and Redux
Microsoft via edX Multiplatform Mobile App Development with React Native
The Hong Kong University of Science and Technology via Coursera Desarrollo de Aplicaciones Mobile Multiplataforma con Nativescript, Angular y Redux
Universidad Austral via Coursera React
Udacity