Understanding Redux: A Beginner's Guide To State Management

Course Overview

This course is a beginner's gateway into the mechanics of using Redux as an application building platform. It takes a bottom-up approach, enforcing the basic aspects of Redux before incorporating them together in a creative and interactive way. It begins with a short theoretical sectio... See More

How You'll Learn

Hands-on coding environments

You don’t get better at swimming by watching others. Coding is no different. Practice as you learn with live code environments inside your browser.

Faster than videos

Videos are holding you back. The average video tutorial is spoken at 150 words per minute, while you can read at 250. That‘s why our courses are text-based.

No set-up required

Start learning immediately instead of fiddling with SDKs and IDEs. It‘s all on the cloud.

Progress you can show

Built in assessments let you test your skills. Completion certificates let you show them off.

Hands-on coding environments

You don’t get better at swimming by watching others. Coding is no different. Practice as you learn with live code environments inside your browser.

Faster than videos

Videos are holding you back. The average video tutorial is spoken at 150 words per minute, while you can read at 250. That‘s why our courses are text-based.

No set-up required

Start learning immediately instead of fiddling with SDKs and IDEs. It‘s all on the cloud.

Progress you can show

Built in assessments let you test your skills. Completion certificates let you show them off.

Course Contents

Hide All

Hide All Lessons

1. Getting to know Redux (Theory)

Introduction

What is Redux?

Why use Redux?

Explaining Redux to a 5 year Old

Redux Store

Actions in Redux

Redux Reducer

The Power of Redux

2. Your First Redux Application

Introduction

The Structure of the React Hello World Application

Revisiting your Knowledge of Redux

Creating a Redux STORE

The Store and Reducer Relationship

The Reducer

Getting back to the Refactoring Process

The Second createStore Argument

Possible Gotcha

Conclusion and Summary

Introducing Exercises

Exercise: User Card

Exercise Solution

3. Understanding State Updates with Actions

Introduction

What is a Redux Action?

Handling Responses to Actions in the Reducer

Examining the Actions in the Application

Introducing Action Creators

A Quiz on Actions

Bringing Everything Together: Index Files

Bringing Everything Together: Buttons

Bringing Everything Together: Handling Button Clicks

Actions Dispatched. Does this Thing Work?

Making the Reducer Count

Returning the State from the Reducer

Subscribing to Store Updates

Important Note on Using store.subscribe()

Almost Done

Conclusion and Summary

A Quiz in Redux Theory

Exercise 1: Bank Application

Exercise Solution: Bank Application

Exercise 2: Time Counter

Exercise Solution: Time Counter

4. Building Skypey: A More Advanced Example

Introduction

Planning the Application

Resolving the Initial App Layout: Laying Down The Foundation

Resolving the Initial App Layout: The Sidebar

Resolving the Initial App Layout: The Main

5. Building Skypey: Designing the State Object

The State Object

Identifying the Relationships

Restructuring the State Object

The Messages Field

The Major Problem with Using Objects Over Arrays

Preserving the Order in Arrays

Recap on the Design of the State Object

Building the List of Users

Setting up the Store

Logging the State Object

Passing the Sidebar data via Props

6. Building Skypey: The User Component

Building the User Component

You Don’t Have to Pass Down Props

Container and Component Folder Structure

Refactoring to Set Initial State from the Reducer

Reducer Composition

Refactoring Skypey to Use Multiple Reducers

Reducer Composition Revisited

7. Building Skypey: The Empty Screen

The Active User

Passing the Props

Javascript Implementation

CSS Implementation

8. Building Skypey: The Chat Window

Rendering the Active User

Action Dispatch

Dispatch Recognition

Breaking the Chat Window into Smaller Components

9. Building Skypey: Header and Chat Window

The Header Component

Building the Header

The Chats Component

Javascript Implementation For Chats

Chats Implementation Explained

Styling the Chat

Exercise: Delete Contact

Exercise Solution

10. Building Skypey: Messaging

The Message Component

Building Message Input

Final Touches to the Message Input Component

Submitting the Form

Updating the Message State

Retaining Messages in the State

Exercise: Clear Message Field

11. The Skypey App

Tweak: Scroll Removal for New Messages

Conclusion and Summary

Exercises: Edit and Delete Messages

Exercise Solution