Provider render method error

[solomonokpolua]

Thanks a lot for the great work. Am really learning a lot from the lecture but got hooked up in part 12 "adding Redux to details" I triied modifying the index.js file as intructed with "Provider'" in the lesson but keep getting this error message (section of video: 13.20)

"Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of Context.Consumer."

See my code below
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from "react-redux";
import './index.css';
import App from './App';
import store from "./store"

ReactDOM.render(
,
document.getElementById('root'));

I don't know were the error is from. Please kindly assist.

See code from the following;

(1)
index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from "react-redux";
import './index.css';
import App from './App';
import store from "./store"

ReactDOM.render(


,
document.getElementById('root'));

(2)
App.js

import express from "express";
import data from "./data.js";

const app = express();

app.get("/api/products/:id", (req, res) => {
const productId = req.params.id;
const product = data.products.find(x=>x.id === productId);
if(product)
res.send(product);
else
res.status(404).send({ msg: "Prodcut not Found"})
});

app.get("/api/products", (req, res) => {
res.send(data.products);
});

app.listen(5000, () => { console.log("Server started at http://localhost:5000") });

(3)
ProductActions.js

import { PRODUCT_LIST_REQUEST, PRODUCT_LIST_SUCCESS, PRODUCT_LIST_FAIL, PRODUCT_DETAILS_REQUEST,
PRODUCT_DETAILS_SUCCESS, PRODUCT_DETAILS_FAIL } from "../constants/productConstants";

import axios from "axios";

const listProducts = () => async (dispatch) => {

try {
    dispatch({ type: PRODUCT_LIST_REQUEST});
const {data} = await axios.get("/api/products");
dispatch({ type: PRODUCT_LIST_SUCCESS, payload: data})
    
} catch (error) {
    dispatch({ type: PRODUCT_LIST_FAIL, payload: error.message});
}

}

const detailsProduct = (productId) => async (dispatch) => {
try{
dispatch({type: PRODUCT_DETAILS_REQUEST, payload: productId});
const {data} = await axios.get("/api/products/" + productId);
dispatch({type: PRODUCT_DETAILS_SUCCESS, payload: data });
} catch (error) {
dispatch({type: PRODUCT_DETAILS_FAIL, payload: error.message});
}
}
export { listProducts, detailsProduct }

(4)

store.js

import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import { productListReducer, productDetailsReducer } from './reducers/productReducers';
import thunk from "redux-thunk";

const initialState= {};
const reducer = combineReducers({
productList: productListReducer,
productDetails: productDetailsReducer,
})

const composeEnhancer = window.REDUX_DEVTOOLS_EXTENSION_COMPOSE || compose;
const store = createStore(
reducer,
initialState,
composeEnhancer(applyMiddleware(thunk))
);
export default store;

(5)
productScreen.js

import React, { useEffect } from "react";
import {Link} from "react-router-dom"
import { useSelector, useDispatch } from "react-redux";
import { detailsProduct } from "../actions/productActions"

function ProductScreen(props){
const productDetails = useSelector(state => state.productDetails);

const {product, loading, error} = productDetails;
const dispatch = useDispatch();

useEffect(() => {
dispatch(detailsProduct(props.match.params.id));
return () => {
//
};
}, [dispatch])

return <div>
    <div className="back-to-result">
        <Link to="/">Back to results</Link>
    </div>
    {loading? <div>Loading...</div>:
    error? <div>{error}</div>:
    (
        <div className="details">
        <div className="details-image">
            <img src={product.image} alt="product"></img>
        </div>
        <div className="details-info">
            <ul>
                <li>
                    <h4>{product.name}</h4>
                </li>
                <li>
                    {product.rating} Stars ({product.numReviews} Reviews)
                </li>
                <li>
                 Price: <b>₦{product.price}</b>
                </li>
                <li>
                    Description
                    <div>
                        {product.description}
                    </div>
                </li>
            </ul>
        </div>
        <div className="details-action">
            <ul>
            <li>
            Price: ₦{product.price} 
            </li>
            <li>
            Status: {product.status} 
            </li>
            <li>
            Qty: <select>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
            </li>
            <li>
                <button className="button primary">Att to Cart</button>
            </li>
            </ul>
        </div>
        </div>   
    )
    };
    
</div>

}

export default { ProductScreen, detailsProduct}

(6)
HomeScreen.js

import React, { useState, useEffect } from "react";
import {Link} from "react-router-dom"
import axios from "axios"
import { useSelector, useDispatch } from "react-redux";
import {listProducts} from "../actions/productActions";

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 className="product-image" src={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="product-rating">{product.rating} ({product.numReviews})</div>
    </div>
</li>)
}

}

export default HomeScreen;

(7)

productConstants.js

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

(8)
productsReducers.js

import { PRODUCT_LIST_REQUEST, PRODUCT_LIST_FAIL, PRODUCT_LIST_SUCCESS, PRODUCT_DETAILS_REQUEST, PRODUCT_DETAILS_SUCCESS, PRODUCT_DETAILS_FAIL } from "../constants/productConstants";

function productListReducer (state = {products: []}, 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;
}

};

function productDetailsReducer (state = {product: {}}, action) {

switch (action.type) {
    case PRODUCT_DETAILS_REQUEST:
        return { loading: true};
    case PRODUCT_DETAILS_SUCCESS:
        return { loading: false, product: action.payload};
    case PRODUCT_DETAILS_FAIL:
        return { loading: false, error: action.payload};
    default:
    
    return state;
}

}

export {productListReducer, productDetailsReducer}