0% completed

All LessonsFree Lessons (7)

Getting to know Redux (Theory)

Explaining Redux to a 5 year Old

Actions in Redux

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

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

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/

...

/

What is Redux?

What is Redux?

A simple overview of Redux in layman's terms.

We'll cover the following...

The official documentation for Redux reads:

Redux is a predictable state container for JavaScript apps.

Those 9 words felt like 90 incomplete phrases when I first read them. My bad. I just didn’t get it. You most likely ...