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

The Structure of the React Hello World Application

Revisiting your Knowledge of Redux

Creating a Redux STORE

The Store and Reducer Relationship

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/

...

/

Introducing Exercises

Introducing Exercises

We'll cover the following...

Please, please, please, don’t skip the exercises. Especially if you’re not confident about your Redux skills and really want to get the best out of this guide.

So, grab your dev hats, ...