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 we use the [normalizr](https://github.com/paularmstrong/normalizr) library in Redux, the API middleware can automatically apply the normalization on the received data:

~~~~~~~
import { normalize } from 'normalizr';

const {
  url,
  onSuccess,
  onFailure,
  method = 'GET',
  data,
  transformRequest,
  transformResponse,
  schema
} = action.payload;

const dataProperty = ['GET', 'DELETE'].includes(method) ? 'params' : 'data';

axios.request({
  url,
  method,
  [dataProperty]: data,
  transformRequest,
  transformResponse
})
  .then(({ data }) => dispatch(onSuccess(normalize(data, schema))))
  .catch(error => { /* handle errors */ });
~~~~~~~
Our action creators can define a schema to automatically convert a complex nested response. However, normalized responses usually consist of data about multiple entities and require either handling one response action in multiple reducers or, better, sending multiple actions to update different parts of the state according to the response from the server.


For example, this action creator defines a network call that will automatically normalize a complex response containing an array of movies, each having a list of reviews and actors:

~~~~~~~
// Passing a normalizr schema in an action creator
import { moviesSchema } from '../schemas';

const fetchMovies = () => ({
  type: API,
  payload: {
    url: '/movies',
    schema: moviesSchema,
    onSuccess: ({ entities, result }) => [
      setMovies(result),
      setAuthors(entities.authors),
      setReviews(entities.reviews)
    ]
  }
});
~~~~~~~

You might notice that the `onSuccess` property now contains a function that returns an array of actions instead of a single action creator. While we can easily add support for this functionality in our API middleware, a more generic solution would be to add new middleware to the stack. This new middleware will catch all actions that are of type `Array` and dispatch them one at a time:

~~~~~~~
//Middleware to handle arrays of actions
const actionArrayMiddleware = ({ dispatch }) => next => action => {
  if (Array.isArray(action)) {
    action.forEach(dispatch);
    return;
  }

   next(action);
};

export default actionArrayMiddleware;
~~~~~~~


Learn how to normalize the responses using the normalizr library.

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

Normalizing Responses