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

We have now:
* created a basic application structure with a simple `state`
* implemented a function that will be responsible for updating the `HTML` based on the state
* defined two functions—`dispatch()` and `subscribe()`. 



But there is still one thing missing. How will our mini-Redux know how to handle the events and change the application state?

For this, we define an additional function. Redux will call our function on each action `dispatched`, passing it the current `state` and the `action`.

To be compliant with Redux’s terminology, we will call the function a `reducer`. The reducer's job will be to understand the action and, based on it, create a new state.


~~~~~~~
//Simple reducer for INC and DEC actions

// Our mutation (reducer) function creates a new state based on the action passed
function reducer(state, action) {
  switch (action) {
    //the increment condition
    case 'INC':
     // Object.assign assigns a new value to the state. In this case it adds one to the previous counter value.
      return Object.assign({}, state, { counter: state.counter + 1 });
    //the decrement condition
    case 'DEC':
      // Object.assign assigns a new value to the state. In this case it subtracts one from the previous counter value.
      return Object.assign({}, state, { counter: state.counter - 1 });
    default:
      return state;
  }
}
~~~~~~~

An important thing to remember is that `reducers` must always return a new, modified copy of the state. They shouldn’t mutate the existing `state`, like in this example:

~~~~~~~
// This is wrong!
state.counter = state.counter + 1;
~~~~~~~

Later in the course, you will learn how you can avoid mutations in JavaScript with and without the help of external libraries.

Here is what the code looks like so far:

Learn how to implement the Reducer function in your application.

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

Implementing Reducer