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



As projects and teams grow in size, it is important to create a convention on the structure of action objects. To this end, the open-source community has come together to create the [Flux Standard Action](https://github.com/acdlite/flux-standard-action) (FSA) specification. The goal is to have consistency across projects and third-party libraries.



The FSA spec defines the structure of actions and a number of optional and required properties. At its base, an action should have up to four fields:


~~~~~~~
const action = {
  type,
  error,
  payload,
  meta
};
~~~~~~~

Each field has a distinct role:

* **`type`**: is the regular Redux action identifier.
* **`error`**: is a Boolean that indicates whether the action is in an error state. The rationale behind this is that instead of having multiple actions, like `'ADD_RECIPE_SUCCESS'` and `'ADD_RECIPE_ERROR'`, we can have only one action, `'ADD_RECIPE'`, and use the `error` flag to determine the status.
* **`payload`**: is an object holding all the information needed by the reducers. In our example, the `title` and `description` would both be passed as the `payload` property of the action.
* **`meta`**: is a property that holds additional metadata about the action which could be consumed by middleware, but is not needed by reducers. We will go into detail on how the `meta` property can be used in the Middleware module.


Implemented as an FSA, our action looks like this:
~~~~~~~
store.dispatch({
  type: 'ADD_RECIPE',
  payload: {
    title: 'Omelette',
    description: 'Fast and simple'
  }
});
~~~~~~~

If the action were in the `error state` (e.g API failure), the payload would hold the error itself, be it an `Error object` or any other value defining the error:

~~~~~~~
const action = {
  type: 'ADD_RECIPE',
  error: true,
  payload: new Error('Could not add recipe ')
};
~~~~~~~


Learn about the standard actions in Flux.

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

Flux Standard Actions