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

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

The Ultimate Guide to Redux/

...

/

Action Creators and Reducers

Action Creators and Reducers

Learn the changes required to tests when you change the project structure.

We'll cover the following...

Usually, when writing unit tests, it is recommended to test each part of the system separately and only test connections and interfaces in the integration tests. In the case of Redux, though, it is worth considering the connection between action creators and reducers.

The way we’ve built our tests ...