Introduction to Redux and its 4 components

What is Redux?

Basically, Redux is a framework that is written to manage the state of the application. As explained by Wikipedia, Redux is an open-source JavaScript library for handling application states. It is generally used with libraries such as React or Angular for developing user interfaces. Like Facebook’s Flux architecture, it was built by Dan Abramov and Andrew Clark.

Redux has 4 components:

1. Store?
2. Reducer?
3. Action
4. Middleware.?

Let’s explore what these 4 components are…

Store

A store holds the whole state tree of your application. The only way to change the state inside it is to dispatch an action on it.

The store has several responsibilities:

• Allows access to the current state
• Allows the state to be updated?
• Registers listener callbacks?
• Handles unregistering of listeners

Reducer

A reducer is a pure function, which returns the state of the application based on the action dispatched by the store.

Example: function employee(state = initialState, action) {

switch(action.type) {

case “addEmployee”:

return Object.assign({}, state, action.payload)

Case “deleteEmployee”:

return Object.assign({}, state, action.payload)

default:

return initialState;

}

}

As an app grows complex we need multiple reducers to manage each part. So let’s consider combining the reducers.

Action

It is a payload of information that transmits data from an application to a store. They are the sole source of information for the store. One can send them to the store using store. dispatch() .

An action is Redux speaks for a plain object with a property called type. Actions are free-form things.?

Example: const action =? {

type: “addEmployee”,

payload

}

dispatch(action);

Middleware

Middleware is the suggested way to extend Redux with custom functionality. Middlewares are used to dispatch async functions. We configure Middleware’s while creating a store.

const store = createStore(reducers, initialState, middleware);