useSelector & useDispatch Hooks

If you’re read any of my previous posts, you know that I am a big fan of using hooks when working with React and Redux. They make building out applications easier and increase functionality with a few lines of code. Recently I discovered the use of two hooks: useSelector and useDispatch, ad toady I’m going to break down how they work.

Both these hooks are used with React and Redux. Redux is a library that is used to manage the state of the application. Any state changes are stored in the Redux store, and any state changes come from dispatching actions to Redux reducers, which then update state.

Both useSelector and useDispatch are imported from ‘react-redux’. Let’s break down useSelector first:

useSelector works as a function and takes in the state and then returns whatever data you want from it. Almost like ‘selecting’ which part of the state you want! useSelector works similar to mapStateToProps in Redux, which also returns an object of the data that the connected component needs. useSelector can return any data, not just an object, and will store that data in a variable as opposed to passing it down as props.

Let’s take a look at an example of using these two hooks in a React component that will display the first and last name of a user.

import React from 'react';
import { useSelector } from 'react-redux;
export default function usernameComponent(){
 const firstName = useSelector(state => state.firstName)
 const lastName = useSelector(state => state.lastName)
 return (
  <>
   <div>{firstName}</div>
   <div>{lastName}</div>
  </>
 )
}

When the component renders, useSelector will go into the store and return whatever the values are for the first and last name. These could be configured when setting up the initialState of the application.

But what if we wanted to change the values of the first and last name? As of now, the names are always going to be the same. So what exactly is the point of all these variables.

Here is where we can bring in useDispatch. This hook also is used as a function and can dispatch any action to the store. It works with other Redux tools like actions, mentioned above, as well as reducers. Let’s build those out to complete the example:

let initialState = {
 firstName = ''
 lastName = ''
} //this will configure the initial state to nothing, which means we need to build a reducer so we can change it using our hooks.
export const nameReducer(state, action) {
 switch(action.type) {
  case: 'SET_FIRST_NAME' :
   return {
    firstName: action.payload
   }
  case: 'SET_LAST_NAME' :
   return {
    lastName: action.payload
   }
 default:
  return state
 }

Now that the reducer is setup, we can utilize useDispatch combined with useSelector to change the state.

import React from 'react';
import { useSelector } from 'react-redux;
export default function usernameComponent(){
 const firstName = useSelector(state => state.firstName)
 const lastName = useSelector(state => state.lastName)
 
 const dispatch = useDispatch()
return (
  <>
   <div>{firstName}</div>
   <div>{lastName}</div>
   <button onClick={dispatch({type: 'SET_FIRST_NAME', payload:      "John"})}</button>
   <button onClick={dispatch({type: 'SET_LAST_NAME', payload:       "Doe"})}</button>
  </>
 )
}

Let’s review what’s happening here:

The initialState value is nothing for both first and last name.

Once the button is pressed, useDispatch will dispatch the action to the reducer. In this example it’s going to be either ‘SET_FIRST_NAME’ or ‘SET_LAST_NAME’. The payload is the string containing the names.

Once the actions have been dispatched, the state has been updated with the new names but they haven’t been displayed yet. This is where useSelector comes in.

useSelector goes into the store, and returns the specific state that we want, being our two name values. The names are now displayed on the component.

These two hooks open up a wide range of functionality and make using Redux to manage state easier to configure. Try them out sometime.