Log In
Join
for free
Back To Course Home
Understanding Redux: A Beginner's Guide To State Management
0% completed
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
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
Exercise Solution: Bank Application
Let’s implement the two tasks from the last section.
Solution:
Get hands-on with 1300+ tech skills courses.
Start Free Trial