TP3344
Redux for React Training
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.
Course Details
Duration
3 days
Prerequisites
All attendees must have advanced JavaScript skills. Knowledge of React would be helpful but not required.
Target Audience
Experienced web developers who want to be equipped to handle large-scale web applications.
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
Course 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
Upcoming Course Dates
