what is Redux?
Redux is a predictable state container for java script apps.
To understand more clearly, lets break down the above sentence into three parts.
1. It is for java script apps.
2. It is a state container.
3.It is predictable.
Lets have a look at, each of these parts individually.
Redux is for javascript applications
1.Redux is not tied to react.
2.It can be used with any library or framework like, Angular, React, Vue etc.
3.Redux is a library for javascript applications.
Redux for state container
Redux stores the state of the application.
But, what exactly do we mean state of the application?
Consider a react app-state of a component.
In the below diagram, we have two components. Each component maintaining its own state.
so now, state of the application means:-The state represented by all individual components in the app.
Redux will store and manage the application state.
Redux is predictable
predictable in what way?
Redux is a state Container.
The state of the application can change.
ex:-todo list—>item(pending)-—>item(completed).
In redux, all state transitions are explicit and it is possible to keep track of them.
The Changes to your application state become predictable.
Why Redux?
If you want to manage the state of your application in a predictable way, redux can help you.
REACT + REDUX
why would we want to use redux in react application?
Component in react have their own state.
But why do we need the another tool to manage the state?
State in react app:-
Consider a react app, the application may consists of several components nested at various levels.
lets pick a component at the end of the component tree(component A).this component has a input field which accepts username, which is stored locally in the component state.
But now the sibling component what to display the name which is entered in component A.
Now how do we send the username from component A to Component B.
so in this case will uplift the state to parent level(Component C), from there will provide methods and data as props to the child components.
What if after few days later if you want to display the username in component D.
then again will uplift the state to Component E.
What if after few days later if you want to display the username in component F.
then again will uplift the state to Component App.
if we want to display the username in only component G. then we have to pass the data through out all parent level components of component G.
So the problem are
1.component which do not need username prop, but still they are aware of it.
2.in react applications were you have a considerable components which shares a common state(like from app), then the state management will have some trouble. this is were redux will help you out.
Redux:-
with redux state is maintained out side of the components. If Component A wants to update the state, then it communicates with the state container. then the state container will update the state in predictable manner and sends that updated value to the components which needs.
React + Redux
React is a UI library and redux is a state management library. They both work independently of each other. To directly use redux in your react application that will be a bit confusing. so we have a REACT-REDUX package.
React-Redux is a official Redux UI binding library for react.
what that means??????????
React-Redux offers couple of functions that helps to connect your react application with redux.
so, if we want to use react and redux then we have to use react-redux library that provides bindings to use react and redux together in your application.
Three Core Concepts of redux
1.One day with the intention to buy a cake we go to a shop, and we ask shopkeeper for a cake.
2.the shop keeper will check the availability of cakes. if there is a availability then he deduct from the shelf and keep track the purchase by a receipt(so that he will know the reason why the cakes are decreased, then he will box the cake and hand it to you, then take the cake and go home).
Three Principles:-
1."the state of your whole application is stored in an object tree with in a single store"
Maintain our application state in a single object which would be managed by a redux store.
2."the only way to change a state is by emitting an action, an object describing what happened".
In a simple terms if you want to update the state of your app, you need to let Redux know about that with an action.
Not allowed to directly update the state object.
3."to specify how the state tree is transformed by actions, you write pure reducers".
second step tells up the state only transforms by emitting actions. But should the state transform is 3 principle.
Action:-
1.This is the only way the application can interact with the store.
2.Carry Some information from app to the redux store.
3.plain javascript objects.
4.Have a 'type' property that indicates the action being performed.
5.The 'type' property typically defined as the string constants.
Reducer:-
1.Specify how app state changes in response to the action sent to the store.(actions just describe what happened, but reducer will define how it happened).
2.Reducer is a function that accept the state and action as a argument and return the next state of the application.
(previous state, action)=>new state
Redux Store:-
For the entire application we will have just one store.
for redux store there are couple of responsibilities:-
1.it is responsible for holding the application state.
2.it exposes a method called getState() which give the application access to the state it holds.
3.it provides a method called dispatch(action) to allow any update to the application state.
4. the store allow's our application to register listeners through the subscribe(listeners). the subscribe method accepts the functions as its parameter, which is executed any time when the state in the redux store changes.
5.Finally we can also unsubscribe to the store by calling the function which is returned by the subscribe method.
Middle Ware:-
it is the suggested way to extend redux with custom functionality(so if we want redux with extra functionality middleware is the way to go.)
it basically provides third-party extension point between dispatching an action, and the moment it reaches the reducer.
use reducer for logging, crash reporting, performing asynchronous tasks etc.
Actions:-
Synchronous Actions :-
As soon as the action was dispatched, the state was immediately updated.
Asynchronous Actions :-
For example if we make asynchronous api call to fetch data from an endpoint and use the data in your application.
Async action creators:-
1.axios:-request to an api call end.
2.redux-thunk:-Define async action creators.
the redux thunk library basically is a middle ware will be applying to our redux store.
So, basically an action creator will return an action, but by using the thunk middle ware it returns the function.
then what is the special about this function, is that it doesn't have to be pure so it is allowed to have side effete such as async api calls.so this functions can dispatch actions, that is made possible because it receives dispatch methods as its arguments.
That was the Basic stuff about Redux, Hope you gained some knowledge about redux.