本文介绍如何使用 React 和 Redux 实现购物车功能。我们将会详细讲解购物车功能的核心概念和使用 Redux 进行状态管理的方法。阅读本文需要一定的 React 和 Redux 基础知识。
购物车功能概述
购物车是电商网站的必备功能之一，它能让用户左右比较商品并最终确认购买。购物车通常包括以下功能：
- 商品列表展示
- 添加/删除商品
- 商品数量修改
- 商品价格计算
- 结算操作
我们将会使用 React 和 Redux 来实现这些功能。首先，我们需要明确购物车功能的数据结构。
购物车数据结构
一个购物车通常包含多个商品，因此我们可以使用一个数组来表示购物车中的商品列表。每个商品可以包括以下属性：
- id：商品唯一标识
- name：商品名称
- price：商品价格
- quantity：商品数量
因此，购物车数据结构可以定义为：
-- -------------------- ---- ------- ----- --------- - -- --- -- ----- --- --- ------ --- --------- - -- - --- -- ----- --- --- ------ --- --------- - ---
我们还需要一个变量来表示购物车当前的总价：
const totalPrice = 0;
现在，我们已经定义好了购物车的数据结构，接下来我们将会使用 React 和 Redux 来实现购物车功能。
使用 React 实现购物车
我们将会使用 React 来构建购物车界面。购物车界面通常包括一个商品列表和一个结算操作区域。
首先，我们需要创建一个商品列表组件，它将会展示购物车中所有的商品。
-- -------------------- ---- -------
------ ----- ---- --------
----- -------- - -- ----- -------------- ---------------- -- -- -
-----
----------------------
-----------------------
------ ------------- --------------------- --------------------------- --
------- -----------------------------------
------
--
----- ------------ ------- --------------- -
-------- -
----- - ------ ------------- -------------------- - - -----------
------ -
-----
--------------- -- -
---------
-------------
-----------
----------------- -- -------------------
------------------------- -- -------------------------- --------------------
--
---
------
--
-
-
------ ------- -------------上面的代码中，CartItemList 组件展示了购物车中的所有商品，并为每个商品提供了删除和数量修改的操作。
接下来，我们需要创建一个结算操作区域组件，它将会展示购物车中的商品总价和结算按钮。
-- -------------------- ---- -------
------ ----- ---- --------
----- ------------ - -- ---------- -- -- -
-----
--------------------------
-------------------
------
--
------ ------- -------------现在，我们已经拥有了两个子组件，接下来我们需要在父组件中将它们组合起来，并将购物车数据传递给它们。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------ ---- -----------------
------ ------------ ---- -----------------
----- ---- ------- --------------- -
-------- -
----- - ------ ----------- ------------- -------------------- - - -----------
------ -
-----
-------------
-------------
---------------------------
-------------------------------------------
--
-------------
-----------------------
--
------
--
-
-
------ ------- -----现在，我们已经将购物车界面展示出来了，但它还没有任何功能。下一步，我们将会使用 Redux 管理购物车的状态。
使用 Redux 管理购物车状态
我们将会使用 Redux 来管理购物车状态。购物车状态包括购物车中的商品列表和商品总价。我们将会使用 Redux 的 action 和 reducer 来实现购物车的增删改查等操作。
首先，我们需要定义购物车的 action 类型：
export const ADD_ITEM = 'ADD_ITEM'; export const REMOVE_ITEM = 'REMOVE_ITEM'; export const CHANGE_ITEM_QUANTITY = 'CHANGE_ITEM_QUANTITY';
然后，我们需要定义购物车的 action：
-- -------------------- ---- ------- ------ ----- ------- - -- --- ----- ------ -------- -- -- -- ----- --------- -------- - --- ----- ------ -------- - --- ------ ----- ---------- - -- -- -- -- -- ----- ------------ -------- - -- - --- ------ ----- ------------------ - -- --- -------- -- -- -- ----- --------------------- -------- - --- -------- - ---
现在，我们已经定义好了购物车的 action，接下来我们需要定义购物车的 reducer：
-- -------------------- ---- -------
------ - --------- ------------ -------------------- - ---- ------------
----- ------------ - -
------ ---
----------- -
--
----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- ---------
----- ------- - ---------------
----- --------- - --------------------- -- ------- --- ------------
-- ----------- -
------------------ -- -----------------
- ---- -
--------------------------
-
------ -
---------
----------- ---------------- - ------------- - ----------------
--
---- ------------
----- ------------ - --------------------- -- ------- --- -------------------
------ -
---------
------ ----------------------- -- ------- --- -------------------
----------- ---------------- - ------------------ - ---------------------
--
---- ---------------------
----- ------------ - --------------------- -- ------- --- -------------------
--------------------- - ------------------------
------ -
---------
----------- ---------------- - ------------------ - ------------------------ - ----------------------
--
--------
------ ------
-
--
------ ------- ------------上面的代码中，我们定义了购物车的初始状态为一个空数组和总价为 0。在 reducer 中，我们根据不同的 action 类型，更新购物车的状态，并计算出新的购物车总价。
现在，我们已经定义好了购物车的 action 和 reducer，接下来我们需要在 React 中使用它们。
首先，我们需要在 Cart 组件中使用 Redux 的 connect 函数获取到购物车的状态并传递给子组件：
-- -------------------- ---- ------- ------ - ------- - ---- -------------- ----- --------------- - ------- -- -- ------ ----------------- ----------- --------------------- --- ----- ------------------ - ---------- -- -- ------------- ------ -- --------------------- --- ------- ---- --------------------- ------ --------- -- ----------------------------- --- -------- -------- --- --- ------ ------- ------------------------ --------------------------
在 mapStateToProps 函数中，我们将购物车的商品列表和总价从 Redux 状态中取出来并传递给子组件。
在 mapDispatchToProps 函数中，我们将 removeItem 和 changeItemQuantity action 映射到 onItemRemove 和 onItemQuantityChange 方法，并通过 dispatch 函数派发 Redux action。
然后，我们需要将购物车的 addItem action 映射到添加商品的按钮上：
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - ------- - ---- ------------
----- ----------- - -- -------- ---------- -- -- -
-----
-------------------------
--------------------------
------- ----------- -- ------------------------------------
------
--
----- ------------------ - ---------- -- --
----------- --------- -- ------------------ --- ----------- ----- ------------- ------ -------------- --------- - ---
---
------ ------- ------------- ---------------------------------现在，我们就成功地使用 React 和 Redux 实现了购物车的功能。
总结
本文介绍了如何使用 React 和 Redux 实现购物车功能。我们首先概述了购物车的功能和数据结构，然后使用 React 实现了购物车的展示界面。接着，我们使用 Redux 管理购物车状态，并实现了增删改查等操作。最后，我们将购物车状态与 React 组件进行了连接，实现了完整的购物车功能。
本文涉及的代码示例可以在 GitHub 上查看。我希望本文可以帮助你更深入地理解 React 和 Redux 的使用，并为你实现购物车功能提供指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6492670848841e9894033c60