Introduction to Redux and it’s 4 components

What is Redux?

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

Redux has 4 components namely, Store Reducer Action and Middleware. Let’s explore what these 4 mean. 

What is a store?

Let’s know the basic fundamentals of a store, methods of a store and how do we create a store. 

3 fundamentals to remember:

Now that we know what a Store fundamentally means, we jump onto knowing its methods.

Methods of a store:

Creating a Store:

Creates a Redux store that holds the complete state tree of our app. We will have a single store in your app.

Now that we know how to create a Store let’s move on to our second component, a Reducer. 

Read More: State Management Using Redux

What is a 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.

How to combine multiple reducers?

As your apps grow more complex, you will want to split your reducing function into separate functions, each managing the independent parts of the state.

The combineReducers helper function turns an object whose values are different reducing functions into a single reducing function you can pass to createStore.  

             const rootReducert = combineReducer(reducer1, reducer2)

 Our 3rd component being Actions are our payloads of information.

What is an 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-forms things. 

Example: const action =  {

type: “addEmployee”,

payload

}

dispatch(action);

Coming to our last component the Middleware.

What is a 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);