错误：找不到 react-redux 上下文值；请确保组件包装在 <Provider>

Question

请我是新来的反应。我正在尝试使用 react axios 和钩子从我的后端渲染数据。我不断收到此错误消息，并确保应用程序已包装在提供程序中。在导出之前，我是否必须将 Homescreen 组件包装在提供程序中？谢谢。

这是 Homescreen.js ；显示数据

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 => state.productList); 
        const { products, loading, error} = productList;

        const dispatch = useDispatch();
        useEffect(()=>{

            dispatch(listProducts()); 



            return ()=> {
                //
            };
        }, [ dispatch ])

     return loading? <div> loading... </div>:
        error? <div> {error} </div>:
        (

                    <ul className="products"> 

                    {
                      products.map(product => 

                    <li  key = {product._id} >

                            <div className="product">
                            <Link to= {'/product/'+ product._id}> 
                            <img src={product.image} className="product-image" alt="product"></img>
                             </Link> 

                                <div className="product-name"> 
                                <Link to= {'/product/'+ product._id}> {product.name} </Link> 

                                    </div>
                                <div className="product-brand"> {product.brand}</div>
                                <div className="product-price"> ${product.price}</div>
                                <div className="rating"> {product.price} Stars ({product.numReviews} Reviews)</div>
                            </div>
                        </li>
                      )
                    }

                </ul>
        )

}


export default   HomeScreen; 

这是应用程序；

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 = ()=>{

      document.querySelector(".sidebar").classList.add("open")
  }

  const closeMenu = ()=>{
    document.querySelector(".sidebar").classList.remove("open")
  }
  return (

    <BrowserRouter> 
    <div className="grid-container">
            <header className="header">
                <div className="brand"> 
                    <button onClick={openMenu}>
                        &#9776;
                    </button>
                    <Link to = "/">Amazone</Link>

                </div>
                <div className="header-links"> 
                    <a href="/#"> Cart </a>
                    <a href="/#"> SigniN</a>
                </div>
             </header>
            <aside className="sidebar"> 
                <h3> Shopping Categories</h3>
                <button className="sidebar-close-button" onClick={closeMenu}>X </button>
                <li>
                    <a href="index.html"> Pants</a>
                </li>

                <li>
                    <a href="index.html"> Shirts</a>
                </li>
            </aside>

        <main className="main">
            <div className="content">
            <Route path="/product/:id" component = {ProductScreen} /> 
           <Route path="/" exact = {true} component = {HomeScreen} />   


            </div>

        </main>

        <footer className="footer">
            All Rights Reserved
        </footer>

    </div>
    </BrowserRouter>
  );
}
export default App;

这是 Index.js

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(
  <Provider store={store}> 

     <App />

  </Provider>
 ,

  document.getElementById('root')
);
serviceWorker.unregister();

减速器：

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;      
    }
}

Reducer 常量；

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';

减速器动作；

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;      
    }
}

Answer 1

问题是您从“react-redux/lib/hooks/useSelector”而不是“react-redux”导入钩子。

代替：

import { useSelector } from 'react-redux/lib/hooks/useSelector';
import { useDispatch } from 'react-redux/lib/hooks/useDispatch';

使用：

import { useSelector } from 'react-redux';
import { useDispatch } from 'react-redux';