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

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`.



A connection between a sender and a receiver is not necessarily one-to-one. A keypress might cause a single action to be sent that will cause  a middleware to send a message to the server and a reducer to change the state. This results in a pop-up appearing. The converse is also true,  where a single reducer might be listening to multiple actions. While in straightforward Redux applications, there might be a reducer for each action and vice versa. In large applications, this relation breaks down. We have multiple actions handled by a single reducer and multiple reducers and middleware listening to a single reducer action.

> Consider a logout action that is usually caught by multiple reducers, each cleaning its own part of the state.

Because the side-emitting the actions doesn’t know who might be listening to it, our actions have to carry all the information needed for the receiving end to understand how to respond.

The simplest way to hold information in JavaScript is to use a plain object, which is the very definition of a Redux action:


~~~~~~~
const action = { type: 'MARK_FAVORITE' };
~~~~~~~

Actions are plain objects with one required property, `type`. The `type` is a unique key describing the action, and it is used by the receiving end to distinguish between actions.

> The `type` property value can be anything, though it is considered good practice to use strings to identify actions. 

In Redux, we send actions to the store, which passes them to middleware and then to reducers. To notify a store about an action, we use the store’s `dispatch()` method.

Unlike many Flux implementations, in Redux, the store’s `dispatch()` API is not globally available. You have a few options to access it:

1. By holding a reference to the store
2. Inside middleware
3. Through methods provided by special libraries for different frameworks

Here’s a simple example of dispatching actions by holding a direct reference to the store:



Get an introduction of actions and action creators.


Introduction

Get an introduction of actions and action creators.

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