React useSelector & useDispatch
React has many features that are consistently being updated or created every so often. It being an open source JavaScript library for building user interfaces you can see why it’s so popular.I even use it on a daily basis towards my projects, and when I think I have a grasp on everything that is React, I quickly find out there is way more to learn. Which brings me to React Hooks.
React Hooks was introduced back in 2018 at a React conference. As a way to use state and other effects without having to define a JavaScript class. It truly is a way to take advantage of having a more pure, simple and cleaner component. Which in turn is easier to read as well.
There are two hooks that I want to bring to your attention both being “useSelector” and “useDispatch”. Now if you’re familiar with React Redux, redux is a state container for applications. Enabling you to receive or manipulate state from anywhere in your code without having to trickle down props through multiple levels of components and their children. Redux in itself is a life saver, for me at least when I learned of it.
Now with redux in order for you to grab state and manipulate it within any component you need to set up “Store” making state global, and set up “Connect” to connect a react component to the store. With connect you need to set it up as so….
Start with importing “connect” from ‘react-redux’ in the components file. As you can see “connect” has two parameters. “MapStateToProps” and “MapDispatchToProps”. MapStateToProps are needed in order to receive state when needed. “MapDispatchToProps” are needed when the state needs to be manipulated depending on what the user action calls for. If one is needed and the other is not then you leave that parameter that is not needed “null”. Both call for different props to be defined which can be called and used within the component.
Going back to hooks “useSelector” and “useDispatch” during my exploration further into React applications I came across these two gems. To set it up you have to import { useSelector, useDispatch } from ‘react-redux”. For this example I made a simple counter. Here we are able to receive state and manipulate it here on one screen. You click “Increment and it adds 1. “Decrement” subtracts 1 visibly.
Now with “useSelector” in one line of code you can retrieve state, a callback function, which returns a specified state. In this case it is called “counter”. This allows us to get state and use it in this example to show the current counter. As for “useDispatch” this allows us to “dispatch” a certain action to our reducer. Currently we have two action types, ‘INCREMENT” and “DECREMENT”. When a button is clicked it sends a dispatch with one of two actions. “onClick” receives a callback function named after our declared variable “dispatch” with a “type” and the action you want it to take as seen below.
As you can see the amount of lines of code are cleaner compared to using “connect” and preferably more readable, to say, someone reviewing your code for the first time. When I first heard of React Hooks I was a little nervous and thought, “Great..I don’t know this!”, but with a little research and practice I see why they play an important role in React. For me it’s so much easier and in my opinion cool what the React community has come up with just to make programming a little more convenient. Give it a try!! Below is a list of sources that I found valuable to my research. Thank you for reading :)
