The component is not wrapped

I’m trying to figure out what is the problem here. I keep getting the same error message which is “Error: could not find react-redux context value; please ensure the component is wrapped in a < Provider >”.

import 'tailwindcss/tailwind.css';
import '../styles/global.css';
import Router from 'next/router';
import ProgressBar from "@badrap/bar-of-progress";
import React, { useEffect, useState } from "react";
import { auth } from '../firebase';
import { useDispatch, useSelector, Provider } from "react-redux";
import { store } from '../src/app/store'
import { login, logout, selectUser } from "./userSlice";

function MyApp({ Component, pageProps }) {

    const user = useSelector(selectUser);
    const dispatch = useDispatch();

    useEffect(() => {

      const unsubscribe = auth.onAuthStateChanged(userAuth => {
        if(userAuth) {
          dispatch(
            login({
            uid: userAuth.uid,
            email: userAuth.email
          })
          );
        } else {
          dispatch(logout);
        }
      });
      return unsubscribe;
    }, []);

    return (
      <Provider store={store}>
          <Component {...pageProps}/>
      </Provider>
    )

}

export default MyApp

Answer

MyApp is not inside the <Provider store={store}> that’s why it can’t get value from useSelector. The Provider Component is what allows it’s children to get and set values to the Redux store.

So you must lift up your provider above <MyApp /> Component for Redux like this:

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