Redux :
redux is open source javascript librabry for managing appication state.
redux tool is not only for react we can also use in angular, Vue js ,
if you want to use Redux in react we have to install some packages npm install Redux and React-redux Redux Archstructure : yeah actually in react we have to manage state management already but the application growing bigger if you want mange state of the application bit Complex .
actually to avoid that they have introduced redux Library is in that we can manage the state of the application
It has mainly 4 concepts , store , Actor , reducer, Dispatch
store : what ever application data we have we will keep it in the redux store or used to store our " State value" Reducer : Reducer is a part of a store , Reducer is for managing the state values or what ever store value in store to managing properly
If you want to update any value in the redux store we have to dispatch an action that action need to be dispatch to reducer by using dispatch as soon as reducer is called . it will update state and the store so where ever the component are subscribing the data that will be updated
MapDispatchto Props
is used to provide the action creator as props to our component . when we use in our component , when ever we want to dispatch the action creator (delete,add,Insert) then we use this mapdispatchto props .After dispatch of function directly moved to reducer Mapstateto Props :
is used to function that you would use to provide the store data to our Component
connect : Connect is a react -redux module with connect only we are sending mapstateto props , mapdispatchto props then only component .
Redux is a predictable state container for JavaScript apps.
As the application grows, it becomes difficult to keep it organized and maintain data flow.
Redux solves this problem by managing application’s state with a single global object called Store.
Redux fundamental principles help in maintaining consistency throughout
your application, which makes debugging and testing easier.
More importantly, it gives you live code editing combined with a time-travelling debugger.
Principles of Redux : Redux is determined by three most important principles
1.Single Source of Truth
2. State is Read-only
3.Changes are made with pure functions
1.Single Source of Truth :
The state of your whole application is stored in an object tree within a single store. As whole application
state is stored in a single tree, it makes debugging easy, and development faster.
2. State is Read-only :
The only way to change the state is to emit an action, an object
describing what happened. This means nobody can directly change the state of your application.
3. Changes are made with pure functions :
To specify how the state tree is transformed by actions, you write pure reducers.
A reducer is a central place where state modification takes place.
Reducer is a function which takes state and action as arguments, and returns a newly updated state.
Advantages of redux :
Predictability of outcome : – Since there is always one source of truth, i.e. the store, there is no confusion about how to sync the current state with actions and other parts of the application.
Maintainability – The code becomes easier to maintain with a predictable outcome and strict structure.
Server-side rendering – You just need to pass the store created on the server, to the client side. This is very useful for initial render and provides a better user experience as it optimizes the application performance.
Developer tools – From actions to state changes, developers can track everything going on in the application in real time.
Community and ecosystem – Redux has a huge community behind it which makes it even more captivating to use. A large community of talented individuals contribute to the betterment of the library and develop various applications with it.
Ease of testing – Redux’s code is mostly functions which are small, pure and isolated. This makes the code testable and independent.
Organization – Redux is precise about how code should be organized, this makes the code more consistent and easier when a team works with it.