In this post we will look into learn using react hooks with redux and how to do it easily. After reading this post you will be able to handle redux state and dispatching events very easily with react hooks inside functional components of react. I assume you have our redux store ready and you have done all the pre-requisites which are needed to start with redux such as creating a store, wrapping app inside store provider. In this post I will just explain how to use the existing store with react hooks.
What is Redux And why you should use it?
Redux is state management for react applications. In simple words, we can use it for saving state in the global state so that we can easily have it available on every component throughout the applications checkout redux documentation. Redux is a single source of truth when it comes to states in redux connected applications.
I find it very essential for any application which deals with more than 2-3 functionalities or modules. As the application grows the complexity of the application also grows and if you keep all the state in component’s local state whether it Stateful component or Stateless component with react hooks to store state. It will be complex to pass state to other components which is not a sibling. Then you only have 2 options to pass props which are:
Pass props as routing props
Store it in local/session storage and fetch in the component you need it.
Both of the above solutions are not that feasible or not in good practice. You can not store data in local/session storage every time nor you can send it on URL if the data is sensitive.
Here Redux comes handy to store data and receive it anywhere in the application. It is a subscription type of methodology. You connect your component with the Redux store and whenever any value is updated, all the connected components will receive the updated value instantly.
Top comments (0)