通过 react redux 和 redux-thunk 加载电子商务产品

Question

我正在用react、redux、redux-thunk做一个电子商务网站（我还不知道redux-thunk）。假设该网站有 6 页 主页、商店页面、联系页面、关于页面、订单页面、结帐页面，如果我们点击产品，它将显示产品详细信息页面.

在主页中有 3 个不同的滑块，需要所有产品都显示在滑块中，这意味着我需要在主页中显示 API 中的所有产品。

另外，在商店页面我需要展示商店页面

上的所有产品

我有一个名为 Layout 的组件，我在其中有条件地呈现页面，例如 / Homepage 将被加载和 /shop shop-page 将被加载。然后我在 Appjs 文件中导入 Layout 组件。

App.js

    

    import React from 'react';
    import './App.module.css';
    import { Route, Switch } from 'react-router-dom';
    import Layout from './container/layout/Layout.js'
    import HomePage from './Pages/HomePage/HomePage';
    import ShopPage from './Pages/ShopPage/ShopPage';
    import SingleRroductPage from './Pages/SingleProductPage/SingleRroductPage';
    
    
    
    function App() {
      return (
        <div className="App">
          <Layout>
    
            <Switch>
              <Route path="/" exact component={HomePage} /> 
              <Route path="/shop" component={ShopPage} />
              <Route path="/single/:id" component={SingleRroductPage} />
            </Switch>
          </Layout>
        </div>
      );
    }
    
    export default App;

Layout.js

    

    import React from 'react';
    
    import Topbar from '../../component/header/topbar/Topbar';
    import Footer from '../Footer/Footer';
    import Navbar from '../navbar/Navbar';
    
    
    
    
    function Layout(props) {
    
        return (
            <div>
                <Topbar />
                <Navbar />
                {props.children}
                <Footer/>
            </div>
        );
    }
    
    export default Layout;

现在的问题是我应该从哪里加载产品 API？

-在 Appjs 中？ -分别在主页和商店页面上？ -在 layoutjs 文件中？

如果我在 App.js 或 Layout.js 文件中加载所有产品，那么所有产品将出现在每隔一个页面上，如联系页面和关于页面。这不会是性能问题吗？

产品详情页

我应该使用不同的 API 端点，例如

`` “/api/products/single:id” ? ``` 还是从所有产品中按 id 筛选？

Answer 1

Redux 为您提供了可以在任何组件中使用的商店。您可以从 app.js 调用 API 如果您更新商店，您可以 re-use 来自 1 API 个电话的数据。

Answer 2

每个组件都应该负责请求自己的数据。 HomePage 和 ShopPage 都应该调用一个动作来加载他们需要的数据（在理想的设置中，该动作将检查数据是否已经存在于获取之前的状态中，但这有点超前了).

当然，您不希望为每个需要获取数据的组件重复逻辑。这就是 redux 派上用场的地方。您可以定义一个动作创建者 fetchApiData(endpoint)，它采用您要调用的端点的名称。所有与获取和存储数据相关的逻辑都在您的 redux 文件中处理（通常称为 reducer.js、actions.js 等）。

您的组件负责：

安装组件时每个端点调用一次 fetchApiData(endpoint) 函数
使用选择器功能从商店中获取他们需要的产品
显示产品

通过 react redux 和 redux-thunk 加载电子商务产品

e-commerce product load by react redux and redux-thunk

e-commerce

reactjs

redux

redux-thunk