State Management In React
There are always multiple ways to do a single, in our case state management in react can be done in some different and well-known ways. some of them are Redux, Context API, Using react the Local States.
In the following i’ll be using functional components Approach.
State management using local states (useState):
The most common and popular way to maintain a local state of a component is using useState. local state is nothing but a state that is used by a particular component only. And when that component gets unmounted then there is no need to maintain that state.
Example:
1) suppose you are working on a form you will need form state to be maintained until the user submits it after submitting the form you won't be needing old details to be shown on the form or when user revisit the form ideal case will be to show him a blank form.
2) you are creating a counter button. on clicking the on-increment button you want to increment the count and have to show that count on-screen, this count has to maintain somewhere so we won't lose it until the user refreshes the page.
how to write local state:
const [state, setState] = useState();
how to change state:
setState(‘Updated state’);
so many times child components also need to access a state of the parent component, in that case, you can pass state through props, but the problem arises when child components child also need the same state. in this case, using local state is not the best idea and Context API comes in the picture.
Context API:
Context API is also another state management library. used to solve the problem of props drilling
What is Props drilling: When a state is maintained in the parent component and it needs to be accessible from its child or grandchild component. then Context API is the best suited to be used.
in above image we are maintaining name and email details in state if that state is needed by component ‘C’ the with traditional way we have to pass it as props to ‘B’ and then from ‘B’ we have to pass it to ‘C’. through ‘B’ has nothing to do with that state but we are still passing it. to Solve this complexity we will use context.
Create context:
Now you have created context and you want to provide it to certain component so that components child’s and grandchild’s and their grand child’s will also have access to that state.
Provide context to App component in this case:
To use context we just need to call useContext by providing reference to that context
Redux:
Redux is the most popular state management library not just used in react but also in some other JS Frameworks like Angular, Vue JS, etc…
In the Redux, application state is stored in single object called Store,
“which is the single source truth”.with that said the application state stored in redux store which is accessible all over the components very easily.
before that there are some fundamentals need to understand:
Actions: Action is an object which describes what should happen or what is happening in the application.This object has field “Type” which is descriptive name of what that action is about.
for Example it can be “LOGOUT_USER”,which describes by dispatching this action user should get logged out.
We have one more field generally called “payload” in which we provide the data with which our state should get updated.
Reducers: Reducers are the only way to change or update state from the Redux store. Reducer receives state and action, state is a previous state that need to updated based on action.
How to send an action to reducer:
dispatch: dispatch is the redux store method which we send an action to the reducer.
we call dispatch method and give action to it the reducer runs the action and update the state. then we can access the state using useSelector Hook.
When to use redux:
when there are two or more components having different parent nodes that want to access a particular state then in this case we should use redux.
Example: state like the user is logged in or not must be known to many components and state containing user details must be accessible all over the application this will be the ideal situation to use redux as state management.
