0% completed

All LessonsFree Lessons (7)

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

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

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

Building Skypey: A More Advanced Example

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

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

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

Building Skypey: The Empty Screen

The Active User Passing the Props Javascript Implementation CSS Implementation

Building Skypey: The Chat Window

Rendering the Active User Action Dispatch Dispatch Recognition Breaking the Chat Window into Smaller Components

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

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

The Skypey App

Tweak: Scroll Removal for New Messages Conclusion and Summary Exercises: Edit and Delete Messages Exercise Solution

Understanding Redux: A Beginner's Guide To State Management/

...

/

Introduction

Introduction

It's time to build our own Redux app from the ground up!

We'll cover the following...

We’ve come a long way, and I salute you for following along.

In this section, I will walk you through the process of ...