Back To Course Home

The Ultimate Guide to Redux

0% completed

Introduction to Redux

What is Flux?Redux and Flux Redux Terminology General Concepts Redux and React/Angular

Basic Redux Implementation

Basic Structure Creating Functions Implementing Reducer Implementing Dispatch Final Implementation Quiz 1

Cloning a Redux Boilerplate

Redux Boilerplate Skeleton Overview Setup

Complete Redux Project

Adding Ingredients

Structuring the Code

A Closer Look at Reducers

Handling Typos and Duplicates

Creating User Interface

Getting Data from the Server

Creating a Store

Creating a Store Accessing and Changing the Store Listening to Updates Replacing the Reducer Store as Observable

Decorating the Store

Higher-Order Functions The Compose Function Store Enhancers The applyMiddleware function Other Uses Quiz 3

Actions and Action Creators

Passing Parameters to Actions

Action Creators

Directory Organization

Flux Standard Actions

String Constants

Testing Action Creators

Redux Thunk

Adding Redux-thunk Server Communication Using State

Redux-Actions Library

Redux-actions Library Errors createAction() Example Using redux-actions with redux-promises Quiz 4

Reducers

Introduction Basic Reducers Reducer Separation Combining Reducers Default Values Tree Mirroring Alternative to Switch Statements

Avoiding Mutations

Why Do We Need to Avoid Mutations?What Is Immutability?Objects Arrays Ensuring Immutability Using Immer for Temporary Mutations Using Higher-Order Reducers Quiz 5

Introduction to Middleware

Introduction Next()

Your First Middleware

Folder Structure The measureMiddleware Connecting to Redux

Middleware

Async Actions Flow Control Other Action Types Parameter-Based Middleware The Difference Between next() and dispatch()Quiz 6

State Management

Introduction Reducer Nesting and Coupling Access to Multiple Nested Data Entities State as a Database Access to Multiple Nested Data Entities in Database

Keeping a Normalized State

Introduction Building the Generic Action Normalizing the Data

Persistence State

Introduction Updating the Root Reducer Updating the Store

Real-World State

Common State Structure Keeping the State Manageable What to Put in the State Quiz 7

Server Communication

Introduction Asynchronous Action Creators API Middleware

Moving Code from Action Creators

Basics Avoiding Full URLs Passing Functions or Strings

Error Handling

Handling errors Handling Unauthorized Requests

Server Communication II

Authentication Implementing a Loading Indicator Implementing Multiple Spinners

Transforming Data

Transforming Data Normalizing Responses

Chaining Requests

Chaining Network Requests Quiz 8

Managing Side Effects

Introduction Side Effects in Action Creators Side Effects in Middleware Other Solutions

Messaging Patterns

Routing Patterns Transformation Patterns

WebSockets

Basic Architecture Connecting to Redux WebSocket Implementation Handling Outgoing Messages and Actions

WebSocket Authentication

Authenticating Communication

Testing

Introduction Directory Organization

Testing Action Creators

Testing Action Creators Using Snapshots Dynamic Action Creators

Async Action Creators

Async Action Creators Mocking Axios Creating a Mock Store Async Action Creator Test Structure Basic Async Action Creator Test

Testing Reducers

Basic Reducer Test Simplifying Basic Reducer Test Making the Tests Pretty Avoiding Mutations Action Creators and Reducers Unknown Actions

Testing Middleware

Middleware Test Structure Simplifying the Test Structure

Testing Async Middleware

Testing Async Middleware Setup General Tests Successful Server Access Failed Server Access

Integration Tests

Setup and Integration

Evolution Of Redux

The Future of Redux

Course Assessment

Final Assessment

Introduction

Get an introduction of actions and action creators.

In Redux, changes to the global state are encapsulated in actions, rather than done directly. This approach allows us to understand the cause of changes and control the flow more easily.

Actions are triggered by events like keypresses or mouse clicks, timers, or network events. The receiver of action could be a middleware or a reducer.

Get hands-on with 1200+ tech skills courses.