Introduction:
When one component state is needed in another component in a React application, we often use “Lifting State Up” technic to share the state between components. That works fine until the application grows and keeping track of your the states becomes a nightmare.
Here, it comes the idea of Redux can be the cure. Since all what we want is a centralized place in the application where the global state is stored and can be accessed by all the components that need it. How Redux achieve that for us?
First, let’s check Redux elements.
Redux elements:
Redux Store: is where the global state is stored. A store is passed as a Prop to React-Redux Provider component, which should be placed at top of the component tree of your project/application to make it accesseble by any component in tree.
Actions: a plain text that describes the action that a component wants to apply to the global state.
Redux Reducer: is a pure function that takes two parameters the “state” and the “action” that need to be applied to the state and return the updated state after applying the action on it.
How components can have access to the global state?
If you have a component that needs the access to the global state then it needs to use Connect, a Redux function that allows to connect the global state to the actions applied by the component using mapPropsToDispatch to dispatch the action to the state or mapPropsToState to extract the some data from the global state. Since React hooks make life easier, there are two hooks provided by React-redux to write less and cleaner code for the same purpose check out useDispatch and useSelector hooks for more info.
Conclusion:
React-redux is a strong tool that makes you take control of the global state of your react application. However as any tool, it needs to be used wisely but if you doubt that you are misusing React-redux, there is Redux DevTools extension that can help you to debug React-redux and helps you find what’s gone wrong easily and correct it.
