11、构建体育用品商店应用：从数据存储到购物车功能实现

构建体育用品商店应用：从数据存储到购物车功能实现

在开发一个完整的体育用品商店应用时，我们需要考虑多个方面，包括数据存储、用户界面组件的创建、URL 路由以及购物车功能的实现。下面将详细介绍如何逐步构建这个应用。

1. 创建数据存储

作为创建数据存储的最后一步，我们在 src/data 文件夹中添加了一个名为 DataStore.js 的文件，并添加了以下代码：

import { createStore } from "redux";
import { ShopReducer } from "./ShopReducer";
export const SportsStoreDataStore = createStore(ShopReducer);

Redux 包提供了 createStore 函数，它使用一个 reducer 来设置一个新的数据存储。目前，这足以创建一个数据存储来开始开发，但后续我们会添加更多功能，以便执行更多操作并从 Web 服务加载数据。

2. 创建购物功能

用户首先看到的应用部分是店面，它将以两列布局展示可用产品，并允许按类别进行过滤。为了实现这一点，我们将使用浏览器的 URL 来选择呈现给用户的内容。应用将支持以下 URL：
| 名称 | 描述 |
| — | — |
| /shop/products | 此 URL 将向用户显示所有产品，无论类别如何。 |
| /shop/pro