title: Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>
body: <p>Please I'm new to react. I'm trying to render data from my backend using react axios and hooks. I keep on getting this error message and I ensured the App was wrapped in a provider. Do I have to wrap the Homescreen component in a provider before exporting it? Thanks. </p>
  
  <p>This is the Homescreen.js  ; To display the data</p>
  
  <pre><code>import React, { useEffect} from 'react';
  import {Link} from 'react-router-dom'
  import { useSelector } from 'react-redux/lib/hooks/useSelector';
  import { useDispatch } from 'react-redux/lib/hooks/useDispatch';
  import { listProducts } from '../actions/productActions';
  import {Provider }from 'react-redux'; 
  function HomeScreen (props) {
  
  
          const productList = useSelector(state =&gt; state.productList); 
          const { products, loading, error} = productList;
  
          const dispatch = useDispatch();
          useEffect(()=&gt;{
  
              dispatch(listProducts()); 
  
  
  
              return ()=&gt; {
                  //
              };
          }, [ dispatch ])
  
       return loading? &lt;div&gt; loading... &lt;/div&gt;:
          error? &lt;div&gt; {error} &lt;/div&gt;:
          (
  
                      &lt;ul className="products"&gt; 
  
                      {
                        products.map(product =&gt; 
  
                      &lt;li  key = {product._id} &gt;
  
                              &lt;div className="product"&gt;
                              &lt;Link to= {'/product/'+ product._id}&gt; 
                              &lt;img src={product.image} className="product-image" alt="product"&gt;&lt;/img&gt;
                               &lt;/Link&gt; 
  
                                  &lt;div className="product-name"&gt; 
                                  &lt;Link to= {'/product/'+ product._id}&gt; {product.name} &lt;/Link&gt; 
  
                                      &lt;/div&gt;
                                  &lt;div className="product-brand"&gt; {product.brand}&lt;/div&gt;
                                  &lt;div className="product-price"&gt; ${product.price}&lt;/div&gt;
                                  &lt;div className="rating"&gt; {product.price} Stars ({product.numReviews} Reviews)&lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/li&gt;
                        )
                      }
  
                  &lt;/ul&gt;
          )
  
  }
  
  
  export default   HomeScreen; 
  
  </code></pre>
  
  <p>This is the App;</p>
  
  <pre><code>import React from 'react';
  import {Link, BrowserRouter ,Route } from 'react-router-dom'
  import './App.css';
  import HomeScreen from './screens/HomeScreen'
  import ProductScreen from './screens/ProductScreen'
  import {Provider }from 'react-redux'; 
  
  function App() {
  
    const openMenu = ()=&gt;{
  
        document.querySelector(".sidebar").classList.add("open")
    }
  
    const closeMenu = ()=&gt;{
      document.querySelector(".sidebar").classList.remove("open")
    }
    return (
  
      &lt;BrowserRouter&gt; 
      &lt;div className="grid-container"&gt;
              &lt;header className="header"&gt;
                  &lt;div className="brand"&gt; 
                      &lt;button onClick={openMenu}&gt;
                          &amp;#9776;
                      &lt;/button&gt;
                      &lt;Link to = "/"&gt;Amazone&lt;/Link&gt;
  
                  &lt;/div&gt;
                  &lt;div className="header-links"&gt; 
                      &lt;a href="/#"&gt; Cart &lt;/a&gt;
                      &lt;a href="/#"&gt; SigniN&lt;/a&gt;
                  &lt;/div&gt;
               &lt;/header&gt;
              &lt;aside className="sidebar"&gt; 
                  &lt;h3&gt; Shopping Categories&lt;/h3&gt;
                  &lt;button className="sidebar-close-button" onClick={closeMenu}&gt;X &lt;/button&gt;
                  &lt;li&gt;
                      &lt;a href="index.html"&gt; Pants&lt;/a&gt;
                  &lt;/li&gt;
  
                  &lt;li&gt;
                      &lt;a href="index.html"&gt; Shirts&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/aside&gt;
  
          &lt;main className="main"&gt;
              &lt;div className="content"&gt;
              &lt;Route path="/product/:id" component = {ProductScreen} /&gt; 
             &lt;Route path="/" exact = {true} component = {HomeScreen} /&gt;   
  
  
              &lt;/div&gt;
  
          &lt;/main&gt;
  
          &lt;footer className="footer"&gt;
              All Rights Reserved
          &lt;/footer&gt;
  
      &lt;/div&gt;
      &lt;/BrowserRouter&gt;
    );
  }
  export default App;
  </code></pre>
  
  <p>This is the Index.js</p>
  
  <pre><code>import React from 'react';
  import {Provider }from 'react-redux';
  import ReactDOM from 'react-dom';
  import './index.css';
  import App from './App';
  import * as serviceWorker from './serviceWorker';
  import allreducer from './allreducer.js'
  import thunk from 'redux-thunk';
  import {createStore, applyMiddleware, compose} from 'redux';
  
  
  // to see the action dispatched in the state at the browser
  const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
  
  const initialState = {};
  //Thunk is a middleware that allows operation of async in the action
  const store = createStore(allreducer, initialState, composeEnhancer(applyMiddleware(thunk)));
  
  ReactDOM.render(
    &lt;Provider store={store}&gt; 
  
       &lt;App /&gt;
  
    &lt;/Provider&gt;
   ,
  
    document.getElementById('root')
  );
  serviceWorker.unregister();
  </code></pre>
  
  <p>The Reducer:</p>
  
  <pre><code>import { PRODUCT_LIST_REQUEST, PRODUCT_LIST_SUCCESS, PRODUCT_LIST_FAIL, PRODUCT_DETAILS_REQUEST, PRODUCT_DETAILS_SUCCESS, PRODUCT_DETAILS_FAIL } from "../constants/productConstants";
  
  //Reducers 
  function productListReducer (state = {product: []}, action){
  
      switch(action.type){
          case PRODUCT_LIST_REQUEST:
              return {loading: true};
          case PRODUCT_LIST_SUCCESS:
              return {loading: false, products: action.payload}
          case PRODUCT_LIST_FAIL:
              return {loading:false, error: action.payload}
          default:
              return state;      
      }
  }
  </code></pre>
  
  <p>Reducer Constants;</p>
  
  <pre><code>export const PRODUCT_LIST_REQUEST = 'PRODUCT_LIST_REQUEST';
  export const PRODUCT_LIST_SUCCESS = 'PRODUCT_LIST_SUCCESS';
  export const PRODUCT_LIST_FAIL = 'PRODUCT_LIST_FAIL';
  
  export const PRODUCT_DETAILS_REQUEST = 'PRODUCT_DETAILS_REQUEST';
  export const PRODUCT_DETAILS_SUCCESS = 'PRODUCT_DETAILS_SUCCESS';
  export const PRODUCT_DETAILS_FAIL = 'PRODUCT_DETAILS_FAIL';
  </code></pre>
  
  <p>Reducer Action;</p>
  
  <pre><code>import { PRODUCT_LIST_REQUEST, PRODUCT_LIST_SUCCESS, PRODUCT_LIST_FAIL, PRODUCT_DETAILS_REQUEST, PRODUCT_DETAILS_SUCCESS, PRODUCT_DETAILS_FAIL } from "../constants/productConstants";
  
  //Reducers 
  function productListReducer (state = {product: []}, action){
  
      switch(action.type){
          case PRODUCT_LIST_REQUEST:
              return {loading: true};
          case PRODUCT_LIST_SUCCESS:
              return {loading: false, products: action.payload}
          case PRODUCT_LIST_FAIL:
              return {loading:false, error: action.payload}
          default:
              return state;      
      }
  }
  </code></pre>