# Using Redux in React

## Using Redux in React

To bind Redux in React apps we need to understand 4 fundamentals -

1. **`Provider`** - **Redux Store** that holds all of our **Application States** acts as a State Provider to our React App.
2. **`Connect`** -  Connects a **React Component** with the **Redux Store**. Takes two arguments - **State**(or part of State) & **Action**(to dispatch)&#x20;
3. **`mapStateToProps`** - Connects a part of the **Redux State** to the `props` of a **React Component**. By doing so a connected **React Component** will have **access to the exact part** of the **Store** it needs.
4. **`mapDispatchToProps`** - Connects **Redux Actions** to the `props` of a **React Component**. This way a connected **React Component** will be able to **send messages** to the **Store**.

![Illustration of Connect's Workflow](https://109962327-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MC0Wq3Hv_Fc0WRkNF0M%2F-MWc8_mv2DY21WskQoyt%2F-MWc8xh80XgHb1Xj2RSF%2FScreenshot%20\(89\).png?alt=media\&token=8f354edf-23d3-461f-8b61-e463eabcc39e)

## Handling State: `mapStateToProps()` & **`mapDispatchToProps()`**&#x20;

Counter App Example.

{% tabs %}
{% tab title="actionType.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
// Import the connect function from the react-redux library
import { connect } from "react-redux";

// Import the increment and decrement actions from the ../redux/counter/actions file
import { decrement, increment } from "../redux/counter/actions";

// Define a Counter component that receives the count, increment, and decrement props
function Counter({ count, increment, decrement }) {
  return (
    // Return a div that displays the current count and two buttons to increment and decrement the count
    <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"
          onClick={increment} // Call the increment function when the button is clicked
        >
          Increment
        </button>
        <button
          className="bg-red-400 text-white px-3 py-2 rounded shadow"
          onClick={decrement} // Call the decrement function when the button is clicked
        >
          Decrement
        </button>
      </div>
    </div>
  );
}

// Define a mapStateToProps function that maps the count state to a count prop
const mapStateToProps = (state) => {
  return {
    count: state.value, // Access the count state by calling state.value
  };
};

// Define a mapDispatchToProps function that maps the increment and decrement actions to increment and decrement props
const mapDispatchToProps = (dispatch) => {
  return {
    increment: (value) => dispatch(increment(value)), // Dispatch the increment action with a payload of value
    decrement: (value) => dispatch(decrement(value)), // Dispatch the decrement action with a payload of value
  };
};

// Connect the Counter component to the Redux store using the mapStateToProps and mapDispatchToProps functions
export default connect(mapStateToProps, mapDispatchToProps)(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 %}
