How does the Provider component make the Redux store available to all components?

The Provider component in Redux, provided by the react-redux library, is responsible for making the Redux store available to all components in a React application. It does so by leveraging React’s Context API to propagate the Redux store down the component tree.

Prerequisites:

• React
• Node & NPM
• Redux

Steps to Create React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: Installing Redux toolkit:

npm i @reduxjs/toolkit

Step 4: After setting up react environment on your system, we can start by creating an App.jsx file and create a file by the name of components in which we will write our desired function.

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
    "@reduxjs/toolkit": "^2.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^9.1.0",
    "redux": "^5.0.1"
}

Approach:

Follow the below steps to make the Redux store available to all components how using Provider component:

• Setup Redux Store
• Using the Provider Component from react-redux
• Accessing the Redux Store in Components

• In the index.js file:
  • We import the Provider component from react-redux and the Redux store from the store.js file.
  • We wrap the root component (<App />) with the Provider component.
  • We pass the Redux store as a prop to the Provider component. This makes the store available to all components within the component tree.
• In the App.js file:
  • We define the App component, which displays the current count value from the Redux store and provides buttons to increment and decrement the count.
  • We use the connect() function from react-redux to connect the App component to the Redux store.
  • We define mapStateToProps to map the Redux state to props, and mapDispatchToProps to map dispatch actions to props.
  • The connected App component receives the count prop from the Redux store and increment and decrement functions to dispatch actions.

Example: Below is the basic implementation of the above steps:

Javascript

// App.js
import React from 'react';
import { connect } from 'react-redux';

const App = (
    {
        count, increment,
        decrement
    }) => {
    return (
        <div>
            <h1>Counter: {count}</h1>
            <button onClick={increment}>
                Increment
            </button>
            <button onClick={decrement}>
                Decrement
            </button>
        </div>
    );
};

const mapStateToProps =
    (state) => ({
        count: state.count
    });

const mapDispatchToProps =
    (dispatch) => ({
        increment: () => dispatch({ type: 'INCREMENT' }),
        decrement: () => dispatch({ type: 'DECREMENT' })
    });

export default connect(mapStateToProps, mapDispatchToProps)(App);

Javascript

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
// Import Provider from react-redux
import { Provider } from 'react-redux';
import App from './App';
// Import the Redux store
import store from './store/store';

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
);

Javascript

// store.js
import { configureStore } from '@reduxjs/toolkit';

// Define initial state and reducer
const initialState = {
    count: 0
};

const reducer =
    (state = initialState, action) => {
        switch (action.type) {
            case 'INCREMENT':
                return { ...state, count: state.count + 1 };
            case 'DECREMENT':
                return { ...state, count: state.count - 1 };
            default:
                return state;
        }
    };

// Create the Redux store
const store = configureStore({ reducer });

export default store;

Output:

Output