Redux allows you to manage your app’s state in a single place and keep changes in your app more predictable and traceable. It makes it easier to reason about changes occurring in your app.

There are three building parts: actions, store, and reducers. 

Actions in Redux

Actions are events. They are the only way you can send data from your application to your Redux store. 

Actions are sent using the store.dispatch() method. Actions are plain JavaScript objects, and they must have a type property to indicate the type of action to be carried out. They must also have a payload that contains the information that should be worked on by the action. Actions are created via an action creator.

Here’s an example of an action that can be carried out during login in an app:

{ 
  type: "LOGIN",
  payload: {
    username: "foo",
    password: "bar"
  }
}

Here is an example of its action creator:

const setLoginStatus = (name, password) => {
  return {
    type: "LOGIN",
    payload: {
      username: "foo",
      password: "bar"
    }
  }
}

As explained earlier, the action must contain the type property and then the other payload to be stored.

Reducers in Redux

Reducers are pure functions that take the current state of an application, perform an action, and return a new state. These states are stored as objects, and they specify how the state of an application changes in response to an action sent to the store.

It is based on the reduce function in JavaScript, where a single value is calculated from multiple values after a callback function has been carried out.

Here is an example of how reducers work in Redux:

const LoginComponent = (state = initialState, action) => {
    switch (action.type) {

      // This reducer handles any action with type "LOGIN"
      case "LOGIN":
          return state.map(user => {
              if (user.username !== action.username) {
                  return user;
              }

              if (user.password == action.password) {
                  return {
                      ...user,
                      login_status: "LOGGED IN"
                  }
              }
          });
default:
          return state;
      } 
};

Store in Redux
The store holds the application state. It is highly recommended to keep only one store in any Redux application. You can access the state stored, update the state, and register or unregister listeners via helper methods.
Let’s create a store for our login app:
const store = createStore(LoginComponent);
Actions performed on the state always return a new state. Thus, the state is very easy and predictable.
Redux middleware
Redux allows developers to intercept all actions dispatched from components before they are passed to the reducer function. This interception is done via middlewares.
Building on the example Login component discussed in the last section, we might want to sanitize the user’s input before it reaches our store for further processing. This can be achieved via Redux middleware.
Technically, middlewares are functions that call the next method received in an argument after processing the current action. These are called after every dispatch.
Here’s what a simple middleware looks like:
function simpleMiddleware({ getState, dispatch }) {
  return function(next){
    return function(action){
      // processing
      const nextAction = next(action);
      // read the next state
      const state = getState();
      // return the next action or you can dispatch any other action
      return nextAction;  
    }
  }
}
Source : https://blog.logrocket.com/why-use-redux-reasons-with-clear-examples-d21bffd5835/

Installation Redux for Angular

There are many Angular specific implementations of Redux available. For the following demo we’ll use the NPM package: @angular-redux/store @angular-redux/store relies on the redux package itself, so we need to install both packages $ npm install redux @angular-redux/store —save