import useDispatch causes an error "useReduxContext.js:24 Uncaught Error: could not find react-redux context value;.."

Question

Trying to useDispatch in SidebarOption.js component in order to select/switch between chat rooms.

After that I'm getting an error

useReduxContext.js:24 Uncaught Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>
    at useReduxContext (useReduxContext.js:24:1)
    at useStore (useStore.js:17:1)
    at useDispatch (useDispatch.js:14:1)
    at SidebarOption (SidebarOption.js:9:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)

SidebarOption.js

import React from 'react';
import { useDispatch } from 'react-redux';
import styled from 'styled-components';
import { enterRoom } from '../features/appSlice';
import { db } from '../firebase';

function SidebarOption({ Icon, title, addChannelOption, id }) {

    const dispatch = useDispatch();

    const addChannel = () => {
        const channelName = prompt('Please enter the channel name');


        if (channelName) {
            db.collection('rooms').add({
                name: channelName,
            })
        }

    };

    const selectChannel = () => {
        if (id) {
            dispatch(enterRoom({
                roomId: id,
            }))
        }
    };


    return (
        <SidebarOptionContainer
            onClick={addChannelOption ? addChannel : selectChannel}

        >
            {Icon && <Icon fontSize='small' style={{ padding: 10 }} />}
            {Icon ? (
                <h3>{title}</h3>
            ) : (
                <SidebarOptionChannel>
                    <span>#</span> {title}
                </SidebarOptionChannel>

            )
            }

        </SidebarOptionContainer>
    )
}

export default SidebarOption;

...

const SidebarOptionContainer = styled.div`
    display: flex;
    font-size: 12px;
    align-items: center;
    padding-left: 2px;
    cursor: pointer;

    :hover {
        opacity: 0.9;
        background-color: #340e36;
    }

    > h3 {
        font-weight: 500;
    }

    > h3 > span {
        padding: 15px;
    }
`;

const SidebarOptionChannel = styled.h3`
    padding: 10px 0;
    font-weight: 300;

`;

What is the reason of the error? Do I need to wrap App component in Provider tag different way?

LINK to the code is here

I tried to wrap App component in index.js, also tried in App.js

<Provider store={store}>
   <App />
<Provider />

but it caused other errors, regarding store={store}, it couldn't import it right.

Answer 1

I found a solution :) <App /> had to be put inside <Provider> with store attribute in index.js. And I forgot to import store inside index.js.

So the App.js has to look like this

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
import './index.css';
import { BrowserRouter } from "react-router-dom";

import { store } from './app/store';
import { Provider } from 'react-redux';


const container = document.getElementById('root');
const root = createRoot(container);

root.render(

  <BrowserRouter>
    <Provider store={store}>
      <App />
    </Provider>
  </BrowserRouter>

);

and here is a store.js

import { configureStore } from '@reduxjs/toolkit';
import appReducer from '../features/appSlice';

export const store = configureStore({
  reducer: {
    app: appReducer,
  },
});