Course Catalog  > Web and Mobile Development  > JavaScript  > React
TP2997

Redux Training

Redux is a JavaScript library that tames your unruly data. Redux manages your app's state. In every web app, data is critical. But while most JavaScript frameworks like Angular, Vue, and especially React are strong in presenting data, they are quite weak in maintaining data. That was never the focus of their design!
Request Information
Request On-Site or Customized Course Info
Course Details

Duration

3 days

Prerequisites

  • A strong grasp of advanced JavaScript. Please ask about our 5-day JavaScript course which will prepare you for the high-level of JavaScript fluency needed for this course.
  • Knowledge of React would be helpful also but is not necessary.

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
    • It's a library
    • 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
    • Redux ducks
  • 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