In this blog, I’m going to explain the part I did for my project.I used ReactJs as the frontend and for the database we are going to use MongoDb. If you have no idea about ReactJs. Check my last blog about Reactjs.

I’m going to do web application on the theme of ‘Online Fashion Store’.I did homepage as a first move using ReactJs as the frontend. It’s helped me understand the ReactJs definition.

It is the first design I have created for the Reactjs. Still developing to create a beautiful home page.

Next major thing is to add the selected product to the cart. For this i needed to use Redux.

In order to install redux into webstorm. We needed to add the following command on terminal to install react-redux.

What is Redux?

Redux is able to run in different environments. Redux is a state management tool.

Predictable state container for JavaScript apps

Inspired by Flux

Makes state mutations predictable

The state of my application is kept in a store, and each component can access any state that it needs from this store.

Single store and single state tree enables powerful techniques

Logging

API handling

undo/redo

State persistence

‘Time travel debugging

ST

Single source of truth-Single state object tree within a single store

State is read-only (only getters , no setters)- Changes should only be done through actions

Changes are made with pure functions

  • Take previous state and action an return the next state
  • No mutation of the previous state.

Store :

  • Holds the current state value
  • Created using createStore()
  • Supplies three Methods

dispatch(): states state update with provided action object

getState() :returns the current stored value

subscribe():accepts a callback function that will be run every time an action is dispatched

Architecture of Redux

Lets see why do we need State Management Tool?

Let’s see why we need state management tool.

React basically manages with their state without need of external library. But when the web application grows, managing states become difficulty. It can be difficult to know where a state would currently be residing. Ideally, the data in a compound will stay in only one compound, therefore it is impossible to exchange data between sibling components.

For example , in my case

I have js file as ‘Home page’ . Following is my code under Home page

In here i have use the state in the above compound named as Home.

Now in the App.js ,I’m using the state Home compound. If i want to pass the cart number to the Homep , but it is impossible to do. We can call the state in the app.js and then we can pass to both Home and HomeP compounds. But it doesn’t make a sense right. Rather than doing like that we can use Redux for this type of issue.

Understanding How Reacts Work

When one state needed to be use by some components.We are going to use Redux.There is a central store that stores entire application. Each compound can access the store without passing props.

There are three main parts such as Store, Reducers and Actions.

Let’s see what are they one by one.

Actions in Redux

This is an event. It is used to send data from application to the store.

Plain JS object with a type field that specifies how to change something in the state.

Reducers

Pure functions that take the current state and action and return a new state.

Update data immutably

I’m an undergraduate student from SLIIT.Currently following 4th Year First Semester.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store