7854  Reviews star_rate star_rate star_rate star_rate star_half

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