Understanding Redux: A Beginner’s Guide To State Management – Educative

WHAT IS REDUX?

Why use Redux?Preview

Explaining Redux to a 5 year OldPreview Understanding Redux: A Beginner’s Guide To State Management

Redux StorePreview

Actions in Redux

Redux Reducer

The Power of ReduxPreview

YOUR FIRST REDUX APPLICATION UNDERSTANDING REDUX: A BEGINNER’S GUIDE TO STATE MANAGEMENT

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 Understanding Redux: A Beginner’s Guide To State Management

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 ApplicationPreview

Introducing Action Creators

A Quiz on Actions

Bringing Everything Together: Index Files

Bringing Everything Together: Buttons

Actions Dispatched. Does this Thing Work?

Making the Reducer Count

Bringing Everything Together: Handling Button Clicks

Returning the State from the Reducer

Subscribing to Store Updates Understanding Redux: A Beginner’s Guide To State Management

Important Note on Using store.subscribe()

Almost Done

Conclusion and Summary

Exercise Solution: Bank Application

Exercise Solution: Time Counter

A Quiz in Redux Theory

Exercise 1: Bank Application

Exercise 2: Time Counter

BUILDING SKYPEY: A MORE ADVANCED EXAMPLE

Introduction

Resolving the Initial App Layout: The Main

Planning the Application

Resolving the Initial App Layout: Laying Down The Foundation

Resolving the Initial App Layout: The Sidebar

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 ObjectUnderstanding Redux: A Beginner’s Guide To State Management

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 ComponentPreview

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 ComponentPreview

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