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

To illustrate how to use different parts of Redux, we will be building a recipe book application. 

It will add recipes and ingredients for each recipe and fetch an initial recipe list from a remote server.

The first step with any Redux-based app is to plan how data will be arranged in the store. Our recipe object will start out holding only the recipe’s name.  To store the current list, we can use a `regular array`:






~~~~~~~
recipes = [
  { name: 'Omelette' },
  ...
];
~~~~~~~

Ingredients for each recipe will contain a `name` and a `quantity`. Connecting them to the state will be a bigger challenge. There are three general approaches to make this connection.

1. **Nested Objects**

   The **nested objects** approach is to hold the ingredients as an `array` inside a recipe itself:


   ```
   state = {
   recipes: [
    {
      name: 'Omelette',
      ingredients: [
        {
          name: 'Egg',
          quantity: 2
        }
      ]
    },
    ...
   ]
   };
   ```

2. **Nested Reference** 

   The **nested reference** approach is to store the recipe ingredient information directly in the `state` and hold an `array` of recipe ingredient `IDs` in each recipe:


   ```
   state = {
   recipes: [
    {
      name: 'Omelette',
      ingredients: [2, 3]
    }
   ],
   ingredients: {
    2: { name: 'Egg', quantity: 2 },
    3: { name: 'Milk', quantity: 1 }
   }
   };
   ```

3. **Separate Object**

   The **separate object** approach stores the ingredients as a standalone array in the `state`. The `ID` of the recipe connected to the standalone array is in turn stored within the state.


   ```
   state = {
   recipes: [
    {
      id: 10,
      name: 'Omelette'
    }
   ],
   ingredients: [
    {
      recipe_id: 10,
      name: 'Egg',
      quantity: 2
    },
    {
      recipe_id: 10,
      name: 'Milk',
      quantity: 1
    }
   ]
   };
   ```

While all the approaches have their upsides and downsides, keeping the structure as flat and normalized as possible makes the code cleaner and more straightforward. The state’s structure implies the use of two separate `reducers` for recipes and ingredients. We can process both independently.



Learn about the application that we will create.

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