在前端开发中，我们经常需要实现购物车功能，这里我们将介绍如何使用 Redux 打造一个购物车组件。
Redux 简介
Redux 是一种状态管理库，它可以帮助我们管理应用的状态。Redux 的核心思想是将应用的状态保存在一个单一的对象中，这个对象被称为 Store。我们可以通过 Dispatch Action 的方式来修改 Store 中的状态，同时也可以通过 Subscribe 监听 Store 的变化。
Redux 的三个核心概念：
- Store：保存应用的状态。
- Action：描述状态的变化。
- Reducer：根据 Action 更新状态。
Redux 的安装
我们可以使用 npm 进行安装：
--- ------- -----
实现购物车组件
创建 Store
首先，我们需要创建一个 Store，代码如下：
------ - ----------- - ---- --------
----- ------------ - -
------ ---
------ --
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- -----------
------ -
---------
------ ---------------- ----------------
------ ----------- - ---------------------
--
---- --------------
------ -
---------
------ ------------------------- -- ------- --- -------------------
------ ----------- - ---------------------
--
--------
------ ------
-
-
----- ----- - ---------------------上面的代码中，我们首先定义了一个 Store 的初始状态 initialState，包含了 items 和 total 两个属性。接着，我们定义了一个 reducer 函数，根据不同的 Action 更新 Store 的状态。最后，我们通过 createStore 函数创建了一个 Store。
添加商品
当用户添加商品到购物车时，我们需要 Dispatch 一个 ADD_ITEM 的 Action，代码如下：
----------------
----- -----------
-------- -
--- --
----- ------- ----
------ ----
--
---上面的代码中，我们创建了一个 ADD_ITEM 的 Action，并将商品的 id、name 和 price 作为 payload 传递给 reducer 函数。reducer 函数根据这个 Action 更新了 Store 的状态。
删除商品
当用户删除购物车中的商品时，我们需要 Dispatch 一个 REMOVE_ITEM 的 Action，代码如下：
----------------
----- --------------
-------- -
--- --
----- ------- ----
------ ----
--
---上面的代码中，我们创建了一个 REMOVE_ITEM 的 Action，并将商品的 id、name 和 price 作为 payload 传递给 reducer 函数。reducer 函数根据这个 Action 更新了 Store 的状态。
监听 Store 的变化
当 Store 的状态发生变化时，我们需要重新渲染我们的购物车组件。为了实现这个功能，我们可以使用 Subscribe 监听 Store 的变化，代码如下：
------------------ -- - ----- ----- - ----------------- ------------------- ---
上面的代码中，我们定义了一个 Subscribe 函数，当 Store 的状态发生变化时，会调用这个函数，并打印出 Store 的最新状态。
总结
本篇文章介绍了如何使用 Redux 打造一个购物车组件。我们首先通过 createStore 创建了一个 Store，接着实现了添加商品和删除商品的功能，并使用 Subscribe 监听 Store 的变化。Redux 的核心思想是将应用的状态保存在一个单一的对象中，这个对象被称为 Store。我们可以通过 Dispatch Action 的方式来修改 Store 中的状态，同时也可以通过 Subscribe 监听 Store 的变化。Redux 的使用可以帮助我们更好地管理应用的状态，提高应用的可维护性和可扩展性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65d95d6e1886fbafa46ee47b