React-Redux
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
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
