0% completed

All LessonsFree Lessons (5)

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

Introduction Store Setup Adding Recipes Adding Ingredients Structuring the Code A Closer Look at Reducers Handling Typos and Duplicates Creating User Interface Logging Getting Data from the Server Quiz 2

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

Introduction 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

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

The Ultimate Guide to Redux/

...

/

Implementing a Loading Indicator

Implementing a Loading Indicator

Learn how to implement a spinner in your application.

We'll cover the following...

Loading image

A common question when using Redux is how to show a spinner when server requests are in progress. The middleware approach provides an answer using additional dispatch() calls. Before a request starts or after it completes, we can dispatch a special action to be caught by reducers responsible for the UI ...