Introduction React-Redux using Hooks (useSelector && useDispatch)
Tags: react, redux, javascript
Published: 2021-06-05 17:59:21

## Introduction:

Before reading this article you should know about React & Redux, its working.

This article is about React-Redux Hooks. We will go through below main points in this article:

#### * Hooks for Redux.
#### * How to use `useDispatch` Hook.
#### * How to use `useSelector` Hook.


### 1. Hooks for Redux
Before Hooks, we always used a `connect()` which is a higher-order component and wrapper to our component, `connect()` read values from the Redux store.

`connect()` takes two arguments, both optional:

1. `mapStateToProps`
2. `mapDispatchToProps`


* **mapStateToProps:**

called every time the store state changes. It receives the entire store state and should return an object of data this component needs.

* **mapDispatchToProps:**

This parameter can either be a function, or an object. If it’s a function, it will be called once on component creation. It will receive dispatch as an argument and should return an object full of functions that use dispatch to dispatch actions.

more about [connect()](https://react-redux.js.org/api/connect)

Let's move towards react-redux hooks. React-Redux now offers a set of hook APIs as an alternative to existing `connect()` Higher-Order Component. These APIs allow you to subscribe to the Redux store and dispatch actions, without having to wrap your components in `connect()`. By using the Hook API with Function components, components are kept small and the code remains clean.

#### Hooks: 

### 2. useDispatch():

`useDispatch()` hook is equivalent of `mapDispatchToProps`.

We will invoke `useDispatch` and store it to a variable, `dispatch`. This hook returns a `reference` to the `dispatch function` from the Redux store. You may use it to dispatch actions as needed.
And we dispatch it by calling dispatch passing in the return value from the action creator.

**How to use**

Below is the small component where using `useDispatch` and `useSelector`

```
import React from "react";
//import useDispatch from react-redux
import { useDispatch} from "react-redux";
//these are actions define in redux>actions folder
import { updateFirstName } from "../redux/actions"; 

const Form = () => {

  const dispatch = useDispatch();

  const handleFirstName = () => {
    //dispatching the action
    dispatch(updateFirstName("Jason"));
  };
  
  return (
    <React.Fragment>
      <div className="container">
        <button onClick={handleFirstName}>Update First 
        Name</button>
      </div>
    </React.Fragment>
  );
};

export default Form;
```

**complete code in [GITHUB redux-hooks](https://github.com/Bilal-Bangash/redux-hooks)**

### 3.useSelector():

`useSelector()` hook is equivalent of `mapStateToProps`

`useSelector` is a function that takes the current state as an argument and returns whatever data you want from it and it allows you to store the return values inside a variable within the scope of you functional components instead of passing down as props

```
import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { updateFirstName } from "../redux/actions";

const Form = () => {
  const dispatch = useDispatch();
  const nameObj = useSelector((state) => state.nameReducer);
  const { firstName } = nameObj;
  const handleFirstName = () => {
    dispatch(updateFirstName("Jason"));
  };
 
  return (
    <React.Fragment>
      <div className="container">
        <label>First Name : {firstName}</label>
        <button onClick={handleFirstName}>Update First Name</button>
        
        <label>Last Name : {lastName}</label>
        <button type="submit" onClick={handleLastName}>
          Update First Name
        </button>
      </div>
    </React.Fragment>
  );
};

export default Form;
```
**complete code in [GITHUB redux-hooks](https://github.com/Bilal-Bangash/redux-hooks)**

##### useStore():

`useStore()` hook returns a reference to the same Redux store that was passed into `Provider` component.

This hook should probably not be used frequently. Prefer useSelector() as your primary choice. However, this may be useful for less common scenarios that do require access to the store, such as replacing reducers.

```
import React from 'react'
import { useStore } from 'react-redux'

export const ExampleComponent = ({ value }) => {
  const store = useStore()

  // EXAMPLE ONLY! Do not do this in a real app.
  // The component will not automatically update if the store state changes
  return <div>{store.getState().obj.name}</div>
}
```

**complete code in [GITHUB redux-hooks](https://github.com/Bilal-Bangash/redux-hooks)**

If you wanna learn more about `useDispatch` and `useSelector` here it's official link [React Redux Hooks](react-redux.js.org/api/hooks)

Further improvement, suggestion or help. Welcome :)