Redux

  • 88 Lessons
  • 440 Minutes
  • Updated 4 months ago

This course is guaranteed to be up to date.

There's no better strategy for learning a new technology than building your own version of it. In this course, we'll take that to the extreme. First, you'll start off by building your own Redux. Then, once you understand the ins and outs of Redux, you'll look at how to hook that up to a vanilla JavaScript UI. Then, you'll see how React and Redux work together by swapping out your UI with React. After that, we'll address the issues between our React and Redux implementation which will lead us to building our own version of the react-redux bindings. After all of this, you'll take your knowledge of the Redux ecosystem and build a real world application.

Pre-Requisites

You'll be tempted to jump straight into Redux when you first start using React. Don't do this. If you're already familiar with React and modern JavaScript (ES2015+), this course is perfect for you. If not, this may not be the right starting point for you. Check out our React Fundamentals course and our Modern JavaScript course which will be a better fit.
Sign Up

What you'll learn

  • Redux

    createStore
    getState
    subscribe
    dispatch
    Reducers
    Actions
    Combining Reducers
    Middleware
    Thunk Middleware
    Logger Middleware
    Utilizing Constants
    Action Creators
    Architectural Patterns
    Redux with JS UI
    Redux with vanilla React
    Normalizing data structures
    Handling Asynchronous Events
    Optimistic Updates
    Error Handling
    Immutability
    Hot Module Replacement
    Time Travel Debugging
  • react-redux

    New Context API
    Provider
    connect
    Performance
    React vs Redux State
  • Advanced React

    Performance
    Higher Order Components
    React Router v4
    Render Props
    Context.Provider
    Context.Consumer
    Folder Structure

    Who is this course for?

    • Developers who are comfortable with React and are curious about what benefits Redux will give them.
    • Developers who have been trying to learn Redux but are frustrated with the current ecosystem of learning resources.
    • Front end developers wanting to modernize their skillset in order to get a raise or apply for another job.
    • Mid to Sr level developers who are confident in their ability to learn quickly and want the quickest approach to learning Redux for production.
    • Jr developers who are comfortable with JavaScript and React and want to better contribute to their Redux apps at work.
    • Developers who want to understand how Redux works under the hood.
    • Developers who want to learn how the react-redux bindings work under the hood.
    • Developers who have tried and failed to learn Redux before.
    Sign Up

    Course Outline

    • Introduction

      Welcome to the Redux course
      Redux Course Introduction
      FAQ
    • The Store

      What is the Store?
      Quiz: The Store
      Create Store: Getting the State
      Create Store: Listening to Changes
      Quiz: Listening to Changes
      Create Store: Updating the State
      Actions
      Quiz: Actions
      Pure Functions
      Quiz: Pure Functions
      The Reducer Function
      Quiz: The Reducer Function
      Create Store: Dispatching Changes
      Quiz: Dispatch and Modifying State
      Handling more Actions
      Combining Reducers
      Reducer Composition
      Quiz: Reducer Composition and Combine Reducers
      Leveraging Constants
      Action Creators
      Review: The Store, Actions, and Reducers
      Quiz: Review - The Store
    • Adding UI to our Library

      App Scaffolding
      Basic UI
      Dispatching New Items
      Subscribing for UI Updates
      Dispatching to Remove Items
      This is Redux
      Review: Adding UI to our Library
    • Redux Middleware

      Customizing Dispatch
      Utilizing Redux Middleware
      Redux Middleware
      Quiz: Middleware
      Logger Middleware
    • Redux and React

      Adding React
      Dispatching Todos with React
      Dispatching Goals with React
      Lists with React and Redux
      Toggling UI with Redux
    • Asynchronous Redux

      Handling Initial Data
      Loading States with Redux
      Optimistically Deleting Items
      Optimistically Toggling Todos
      Persisting Items
      Custom Thunk
      Benefits of Thunks
      Quiz: Thunks
      Thunkify Goals
      Thunkify Todos
      Thunkify Initial Data
      Redux Thunk Middleware
      More Asynchronous Options
    • Leveraging react-redux

      Downsides of React and Redux
      React's Context API
      Utilizing Context
      Quiz: Provider
      Connecting Components to the Redux Store
      Quiz: Connecting Components
      Implementing connect
      Using react-redux
      Quiz: react-redux
      Redux Folder Structure: Create React App
      Redux Folder Structure: Actions
      Redux Folder Structure: Reducers
      Redux Folder Structure: Middleware
      Redux Folder Structure: Components
      Redux Folder Structure: The Store
      Other Folder Structure Patterns
    • Real World Redux

      Introduction to Polls
      Starter Code
      First Actions
      First Reducers
      Adding Middleware
      Getting App Data
      Building the Dashboard
      Loading Reducer
      Leaderboard UI
      Add Poll UI
      Add Poll to Store
      Poll state
      Poll UI
      Add Answer to Store
      React Router
      Bonus: Redux Devtools
      Outro
      Next Steps

    TylerMcGinnis.com - The best courses I've ever seen.

    Taras Protchenko
    Sign Up

    The Socials

    The Newsletter