Gain insights into Redux, an open-source library for managing app state. Learn about Redux store creation, middleware, state management, error handling, testing, and building robust applications.

react.tar.gz

jest

simplee

no server

Redux

In this course, you will take a deep dive into Redux, an open-source JavaScript library for managing application state.

You will start by running through what Redux is, general concepts, and basic implementation. With the basics out of the way, you will begin working on building a recipe book application, adding more bells and whistles to it as the course progresses. You will learn to create a Redux store, how to work with middleware, state management, error handling, testing, and a whole lot more.

By the end, you will have advanced knowledge of one the most popular libraries among React and Angular developers. You will have the skills to create highly performant and consistent.

The Ultimate Guide to Redux

**Middleware** is one of Redux's most powerful concepts and will hold the bulk of an application's logic and generic service code. To understand middleware, it’s best to first examine the regular data flow in Redux. Any action dispatched to the store is passed to the root reducer together with the current state to generate a new one. Middleware allows us to add code that will run before the action is passed to the reducer.




In essence, we can monitor all the actions that are sent to the Redux store and execute arbitrary code before allowing an action to continue to the reducers. Multiple middlewares can be added in a chain, with each running its own logic, one after another, before letting the action pass through.

The basic structure of a middleware is as follows:


~~~~~~~
const myMiddleware = ({ getState, dispatch }) => next => action => {
  next(action);
};
~~~~~~~

This declaration might seem confusing, but it should become clear once it’s examined step by step. At its base, a middleware is a function that receives from Redux an object that contains the `getState()` and `dispatch()` functions. The middleware returns a function that receives `next()` and returns another function that receives `action` and finally contains our custom middleware code.

> From the user’s perspective, a simple `const myMiddleware = ({ getState, dispatch, next, action }) => {}` might have seemed sufficient. The more complicated structure is due to Redux internals.

The `getState()` and `dispatch()` methods should be familiar as they are APIs from the Redux store. The `action` parameter is the current Redux action being passed to the store. Only the `next()` function should look unfamiliar at this point.

> It is sometimes incorrectly noted in teaching material that the parameter passed to the middleware is `store`, as it has `getState()` and `dispatch()` methods. In practice, the parameter is an object holding only those two APIs and not the other APIs exported by the Redux store.


Introduction to Redux

Basic Redux Implementation

Cloning a Redux Boilerplate

Complete Redux Project

Creating a Store

Decorating the Store

Actions and Action Creators

Redux Thunk

Redux-Actions Library

Reducers

Avoiding Mutations

Introduction to Middleware

Your First Middleware

Middleware

State Management

Keeping a Normalized State

Persistence State

Real-World State

Server Communication

Moving Code from Action Creators

Error Handling

Server Communication II

Transforming Data

Chaining Requests

Managing Side Effects

Messaging Patterns

WebSockets

WebSocket Authentication

Testing

Testing Action Creators

Async Action Creators

Testing Reducers

Testing Middleware

Testing Async Middleware

Integration Tests

Evolution Of Redux

Final Assessment

Introduction