When does class start/end?
Classes begin promptly at 9:00 am, and typically end at 5:00 pm.
Redux for React
Data is critical to every web app. But while most JavaScript frameworks like Angular, Vue, and React are strong in presenting data, they are weak in managing the data. Therefore, React introduced...
Read More
$2,090 USD
Course Code
TP3344
Duration
3 days
Available Formats
Classroom
Data is critical to every web app. But while most JavaScript frameworks like Angular, Vue, and React are strong in presenting data, they are weak in managing the data. Therefore, React introduced Redux to fill that gap. This course teaches students how to use Redux for React to simplify the data so that React can focus on presenting the data.
Skills Gained
- Simplify complex state management with the Redux library
- Use best practices for reducers, dispatchers, and action creators
- Explain and leverage reducer composition
- Understand when, how, and why to use Redux middleware
- Handle asynchronous operations with Redux -- including Ajax
- Integrate a Redux store into a React application
Who Can Benefit
Experienced web developers who want to be equipped to handle large-scale web applications.
Prerequisites
All attendees must have advanced JavaScript skills. Knowledge of React would be helpful but not required.
Course Details
Outline
Introduction
- Redux intro
- The single responsibility principle
- Why Redux?
- Why Redux with React?
- Its history and growth
- The 4 concepts of Redux
- State
- Pure functions
- Composition
- Immutability
- The parts of Redux
- The big picture of Redux
Creating the store
- Installing and including Redux
- The createStore() method
- The simplest possible store
State and Subscriptions
- Single source of truth
- Initializing state
- What goes in state?
- Why subscriptions?
- How to subscribe in Redux
Actions and Reducers 101
- Actions are objects
- The shape of actions
- Type and payload
- Reducers are functions
- Why we have them
- The shape of a reducer
- Tips in avoiding the worst Redux rookie mistakes
Actions
- Action Creators in a React Application
- Dispatching Actions
- Mapping Actions to prop Names
Advanced Actions
- Action constants
- Action type enumerations
- Action creators
- Action creator enumerations
Reducer composition
- The problem: complex state => complex reducers
- The solution: Create state slices
- Creating reducers to handle slices
- Combining reducers with Redux's built-in combineReducers
- Doing it manually
- Why manually is the right way
Redux Middleware
- The Open-Closed Principle
- Introduction to middleware
- The next() function
- The required shape of middleware
- Middleware's super-powers
- Recipes and examples
- Why you must register middleware and how to do it
Ajax with Redux
- The problem with async calls in Redux
- The trick to making a good middleware function
- Registering the middleware
- Dispatching an Ajax call
- Making RESTful API calls
- How to process them into Redux and then into React
Redux-thunk (Time permitting)
- The need for a thunk
- How redux-thunk fits that need
- Installing and using redux-thunk properly
- Dispatching Ajax calls with redux-thunk
Conclusion
