Thursday, 12 May 2022

Redux

 Redux is an open-source JavaScript library for managing and centralizing application state. It is most commonly used with libraries such as React or Angular for building user interfaces. Redux is the official  UI binding library for React. If you are using Redux and React together, you should also use React Redux to bind these two libraries..

Redux: Redux is 3rd party library used for state management in the application. State management refers to deal with

data management. i.e. sharing the data between one component to another.

We have lot of techniques for sharing the data between components like 

props --- Used for transferring data from Parent to child only

callbacks  --- Used for transferring data from child to parent only

context API  --- Used for transferring data from Parent to child only


To overcome the above drawbacks , we have new concept called Redux. React did not introduced the redux concept whereas its 3rd party library.




How to implement Redux.

1) Create React app using react library
2) Create Redux store using redux library
3) To store the data from react app to redux store we can not do it directly
4) There is one special function called reducer , once the data avaliable to reducer then redux store will take it from reducer.
5)But component can not store data directly to reducer so there is one more function called Action. So component first store the data into Action then From Action it will goes to dispatch function and from dispatch it will gors to reducer.


To Create Redux Store
1) Install redux using npm install redux
2) using createStore() we can create redux store.
3) Make available this store to all components for that install react-redux
npm install react-redux
4) React-redux provides a compoenent called provider. 
5) We have wrap this <App/> component inside <Provider/>
6)<Provider/> component takes one default props called store

No comments:

Post a Comment