# Handling State with useSelector & useDispatch Hook

## Handling State using Redux Hooks

Redux has introduced two hooks `useSelector` & `useDispatch` as a replacement of it's `connect` method.

1. **`useSelector`-** analogous to **`connect`** methods' `mapStateToProps` . We pass it a **function** that takes the Redux **Store State** and returns the pieces of **State** we're interested in.
2. **`useDispatch` -** replaces **`connect`** methods' `mapDispatchToProps`. All it does is return our **Store’s Dispatch** method so we can manually **dispatch actions**. It takes **no arguments**.

## Handling State: **`useSelector()` & `useDispatch()`**&#x20;

Counter App Example

{% tabs %}
{% tab title="actionTypes.js" %}

```jsx
export const INCREMENT = "counter/increment";
export const DECREMENT = "counter/decrement";
```

{% endtab %}

{% tab title="actions.js" %}

```jsx
import { DECREMENT, INCREMENT } from "./actionTypes";

export const increment = (value) => {
  return {
    type: INCREMENT,
    payload: value,
  };
};

export const decrement = (value) => {
  return {
    type: DECREMENT,
    payload: value,
  };
};

```

{% endtab %}

{% tab title="counterReducer.js" %}

```jsx
// Import the action types
import { DECREMENT, INCREMENT } from "./actionTypes";

// Define the initial state for the counter
const initialState = {
  value: 0, // The initial value is 0
};

// Define the counterReducer function, which takes the current state and an action as arguments
const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case INCREMENT: // If the action type is INCREMENT
      return {
        ...state, // Return a new object that includes all properties of the current state
        value: state.value + 1, // Increment the value property by 1
      };
    case DECREMENT: // If the action type is DECREMENT
      return {
        ...state, // Return a new object that includes all properties of the current state
        value: state.value - 1, // Decrement the value property by 1
      };
    default: // If the action type is not recognized
      return state; // Return the current state unchanged
  }
};

// Export the counterReducer function as the default export of this module
export default counterReducer;

```

{% endtab %}

{% tab title="Counter.js" %}

```jsx
// Importing the required dependencies
import { useDispatch, useSelector } from "react-redux";
import { decrement, increment } from "../redux/counter/actions";

// Defining the Counter component
function Counter() {
  // Accessing the 'value' state from the Redux store using the 'useSelector' hook
  const count = useSelector((state) => state.value);
  // Getting the 'dispatch' function to dispatch actions to the Redux store
  const dispatch = useDispatch();

  // Handler function to increment the count by a given value
  const incrementHandler = (value) => {
    // Dispatching an 'increment' action with the given value as payload
    dispatch(increment(value));
  };

  // Handler function to decrement the count by a given value
  const decrementHandler = (value) => {
    // Dispatching a 'decrement' action with the given value as payload
    dispatch(decrement(value));
  };

  // Rendering the counter component
  return (
    <div className="p-4 h-auto flex flex-col items-center justify-center space-y-5 bg-white rounded shadow">
      <div className="text-2xl font-semibold">{count}</div>
      <div className="flex space-x-3">
        <button className="bg-indigo-400 text-white px-3 py-2 rounded shadow"
          // Passing the payload to increment action
          onClick={() => incrementHandler(5)}
        >
          Increment
        </button>
        <button className="bg-red-400 text-white px-3 py-2 rounded shadow"
          // Passing the payload to decrement action
          onClick={() => decrementHandler(2)}
        >
          Decrement
        </button>
      </div>
    </div>
  );
}

// Exporting the Counter component as default
export default Counter;
```

{% endtab %}

{% tab title="store.js" %}

```jsx
// Import the counterReducer function
import counterReducer from "./counter/counterReducer";

// Import the createStore function from the Redux library
import { legacy_createStore as createStore } from "redux";

// Create a Redux store by calling the createStore function and passing in the counterReducer function
const store = createStore(counterReducer);

// Export the store as the default export of this module
export default store;

```

{% endtab %}
{% endtabs %}
