First of all, I like to apologize for writing such a long post.I'm new to react and redux and I have created an ecommerce app. After implementing redux, I'm getting this error.
./src/Main.js
36:12-26 './redux/configureStore' does not contain an export named 'ConfigureStore'.
My code:
index.js
import React from "react";
import ReactDOM from "react-dom";
import Main from "./Main";
import "./index.css";
import 'bootstrap/dist/css/bootstrap.css';
import {BrowserRouter} from 'react-router-dom';
ReactDOM.render((
<BrowserRouter>
<Main/>
</BrowserRouter>
)
,
document.getElementById("root")
);
Main.js
import React, { Component } from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import { Route, Switch, withRouter} from 'react-router-dom';
import Navigation from "./components/topNavigation";
import Footer from "./components/Footer";
import Banner from "./components/Banner";
import PLPMenu from "./components/PLPMenu";
import PDP from "./components/PDP";
import Login from "./components/Login"
import Home from "./components/Home";
import { Provider } from 'react-redux';
import { ConfigureStore } from './redux/configureStore';
import {connect} from 'react-redux';
const mapStateToProps = state =>{
return {
topnavigation: state.topnavigation,
plpmenu: state.plpmenu,
pdpmenu : state.pdpmenu
}
}
const store = ConfigureStore();
class Main extends Component {
render() {
return (
<Provider store={store}>
<div>
<Login />
<Navigation />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/Apparel/:category/:subCategory/:id" component={PLPMenu} />
<Route path="/Apparel/:product/:id" component={PDP} />
<Route path="/login" component={Login} />
<Route path="/Banner" component={Banner} />
<Route path="/Footer" component={Footer} />
</Switch>
</div>
</Provider>
)
}
}
export default withRouter(connect(mapStateToProps)(Main));
topNavigation.js
import React, { Component } from 'react';
import axios from 'axios';
import SubMenu from './subMenu';
class Navigation extends Component {
state = {
mainCategory: []
}
componentDidMount() {
axios.get('http://localhost:3030/topCategory')
.then(res => {
// console.log(res.data.express);
this.setState({
mainCategory: res.data.express.catalogGroupView
})
})
}
render() {
const { mainCategory } = this.props;
return (
<nav className="navbar navbar-expand-lg navbar-dark bg-dark mainmenu">
<a className="navbar-brand" href="#">iFashion</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav ml-auto">
{
mainCategory.map(navList => (
<li className="nav-item dropdown" key={navList.uniqueID}>
<a className="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{navList.name} </a>
<ul className="dropdown-menu secondDropdown" aria-labelledby="navbarDropdown">
<SubMenu below={navList.catalogGroupView} />
</ul>
</li>
))
}
</ul>
</div>
</nav>
)
}
}
export default Navigation;
PLPMenu.js
import React, { Component } from "react";
import { Link } from "react-router-dom";
import Footer from "./Footer";
import axios from "axios";
class PLPMenu extends Component {
state = {
shoeCategory: []
};
fetchData = id => {
axios
.get(`http://localhost:3030/category/` + id)
.then(response => {
console.log(response.data.express.catalogEntryView);
this.setState({
shoeCategory: response.data.express.catalogEntryView
});
})
.catch(err => {
console.log(err);
});
};
componentDidMount() {
let { id } = this.props.match.params;
this.fetchData(id);
}
componentDidUpdate(prevProps) {
let currentId = this.props.match.params.id;
let previousId = prevProps.match.params.id;
if (currentId !== previousId) {
this.fetchData(currentId);
}
}
render() {
const { shoeCategory } = this.props;
const picUrl = "https://149.129.128.3:8443";
return (
<div>
<div className="container">
<div className="row">
{shoeCategory &&
shoeCategory.map(shoeList => {
return (
<div key={shoeList.uniqueID} className="col-md-4">
<h2 key={shoeList.uniqueID} />
<img className="plpImage" src={picUrl + shoeList.thumbnail} />
<Link to={`/Apparel/${shoeList.name}/${shoeList.uniqueID}`}>
<p className="pdp">{shoeList.name}</p>
</Link>
<p>
Price : {shoeList.price[0].value}{" "}
{shoeList.price[0].currency}
</p>
</div>
);
})}
</div>
</div>
<Footer/>
</div>
);
}
}
export default PLPMenu;
PDP.js
import React, { Component } from "react";
import { Route, Link, BrowserRouter } from "react-router-dom";
import axios from "axios";
class PDP extends Component {
state = {
pdpCategory: []
};
fetchData = id => {
axios
.get(`http://localhost:3030/product/` + id)
.then(response => {
console.log(response.data.express.catalogEntryView);
this.setState({ pdpCategory: response.data.express.catalogEntryView });
})
.catch(err => {
console.log(err);
});
};
componentDidUpdate(prevProps) {
let currentId = this.props.match.params.id;
let previousId = prevProps.match.params.id;
if (currentId !== previousId) {
this.fetchData(currentId);
}
}
componentDidMount() {
let { id } = this.props.match.params;
this.fetchData(id);
}
render() {
const { pdpCategory } = this.props;
console.log(pdpCategory);
const picUrl = "https://149.129.128.3:8443";
return (
<div>
<div className="container">
<div className="row">
{pdpCategory &&
pdpCategory.map(pdpList => {
return (
<div key={pdpList.uniqueID} className="col-md-4">
<h2 key={pdpList.uniqueID} />
<img className="pdpImage " src={picUrl + pdpList.thumbnail} />
<p>
Price : {pdpList.price[0].value}{" "}
{pdpList.price[0].currency}
</p>
<p>
Description: {pdpList.longDescription}
</p>
<button type="submit">Add to Cart</button>
</div>
);
})}
</div>
</div>
</div>
);
}
}
export default PDP;
For the redux to implement, I have created a redux folder inside ./src folder and have created two files reducer.js and configureStore.js
import PLPMenu from "../components/PLPMenu";
import PDP from "../components/PDP";
import Navigation from "../components/topNavigation";
export const initialState = {
topnavigation: Navigation,
plpmenu: PLPMenu,
pdpmenu : PDP
};
export const Reducer = ( state = initialState , action) => {
return state;
};
configureStore.js
import { createStore} from 'redux';
import {Reducer, initialState} from './reducer';
export const Configuration = () =>{
const store = createStore(
Reducer,
initialState,
);
return store;
}
I don't know where my code is getting wrong. There is only a single error in the console browser window, which I have shared above. Can anyone please help me on this or given an insight how to perfectly implement a redux store.
