Question

首先，我很抱歉写这么长的帖子。我是新来的反应者和还原者，我已经创建了一个电子商务应用程序。实施redux后，出现此错误。

./src/Main.js
36:12-26 './redux/configureStore' does not contain an export named 'ConfigureStore'.

我的代码：

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;

要实现Redux，我在./src文件夹中创建了redux文件夹，并创建了两个文件reducer.js和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;
}

我不知道我的代码在哪里出错。我在上面共享了控制台浏览器窗口中只有一个错误。谁能帮我这个忙，或者给我一个深刻的见解，即如何完美实现Redux存储。

Answer 1

更改import { ConfigureStore } from './redux/configureStore';

到 import { Configuration } from './redux/configureStore';中的Main.js

Redux功能无法在React应用程序中实现

1 个答案: