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

When you start writing a large number of actions,  most of the code will look the same and feel like a lot of boilerplate. There are multiple third-party libraries to make the process easier and cleaner. The [`redux-actions`](https://github.com/acdlite/redux-actions) library is one of the recommended ones, as it is simple and FSA-compliant. 





The library allows us to easily create new actions using the provided `createAction()` function. For example:


~~~~~~~
import { createAction } from 'redux-actions';
import { ADD_RECIPE } from 'constants/actionTypes';

const addRecipePayload = (title) => ({ title });

export const addRecipe = createAction(ADD_RECIPE, addRecipePayload);
~~~~~~~

This code generates an action creator that will return an FSA-compliant action. The generated action creator will have functionality similar to this function:


~~~~~~~
function addRecipe(title) {
  return {
    type: ADD_RECIPE,
    payload: {
      title
    }
  };
}
~~~~~~~

If the title is our only payload, we could simplify the call by omitting the second argument:


~~~~~~~
export const addRecipe = createAction(ADD_RECIPE);
~~~~~~~


The resulting action creator would be as follows:

~~~~~~~
function addRecipe(title) {
  return {
    type: ADD_RECIPE,
    payload: title
  };
}
~~~~~~~

We can also pass metadata to the FSA action. For that, we could include a metadata object as a third argument:


~~~~~~~
export const addRecipe = createAction(
  ADD_RECIPE,
  (title) => ({ title }),
  { silent: true }
);
~~~~~~~

We could also use a function to calculate the metadata based on the parameters we pass in the payload:

~~~~~~~
const addRecipeMetadata = (title) => ({
  silent: true,
  notifyAdmin: title === 'Omelette'
});

export const addRecipe = createAction(
  ADD_RECIPE,
  (title) => ({ title }),
  addRecipeMetadata
);
~~~~~~~


The usage of the action creator is the same as before. We simply call it with the desired parameters:


~~~~~~~
dispatch(addRecipe('Belgian Waffles'));

// The dispatched object:
{
  type: 'ADD_RECIPE',
  error: false,
  payload: {
    title: 'Belgian Waffles'
  },
  meta: {
    silent: true,
    notifyAdmin: false
  }
}
~~~~~~~

Let's look at what the redux-actions library has to offer.

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

Redux-actions Library