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

【问题标题】：e-commerce product load by react redux and redux-thunk通过 react redux 和 redux-thunk 加载电子商务产品
【发布时间】：2021-02-01 20:44:48
【问题描述】：

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

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

另外，在商店页面上，我需要在商店页面

上显示所有产品

我有一个名为 Layout 的组件，我在其中有条件地渲染页面，例如 for / 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;

布局.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 过滤？

【问题讨论】：

标签： reactjs redux e-commerce redux-thunk

【解决方案1】：

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

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

您的组件负责：

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

【讨论】：

【解决方案2】：

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

【讨论】：