Redux 是一个流行的 JavaScript 状态管理工具，它可以让我们轻松地管理应用程序的状态和数据流。在前端开发中，我们可以使用 Redux 来构建复杂的单页面应用，但是它同样也可以用来管理简单的状态，例如购物车。
本文将通过一个简单的购物车实例，向读者展示如何使用 Redux 实现应用程序状态的管理。本文适合那些想要学习 Redux 且希望拥有一个快速入门的指南的开发者。
开始
让我们从创建 Redux store 开始。一个 Redux store 包含所有的应用程序状态，并提供了访问和更新这些状态的方法。我们可以使用 Redux 提供的 createStore 函数来创建一个 store。
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - -
------ ---
------ -
--
-------- ------------- - ------------- ------- -
------------------- -
---- -----------
------ -
---------
------ ---------------- ----------------
------ ----------- - --------------------
--
---- --------------
----- ----- - -------------------------- -- ------- --- -------------------
------ -
---------
------ -
----------------------- -------
-------------------------- - --
--
------ ----------- - --------------------
--
--------
------ ------
-
-
----- ----- - ---------------------我们首先定义了一个简单的 initialState 对象，其中包含一个空的 items 数组和一个初始值为 0 的 total 属性。接着，我们定义了一个 reducer 函数，它将负责响应各种 action 类型，并返回新的应用程序状态。最后，我们使用 createStore 函数将我们的 reducer 函数传递给它，并创建了一个 Redux store。
添加商品
现在我们可以向 store 中添加商品了。我们希望能够添加商品的名称和价格，并且更新购物车的总价。我们将使用一个 action 来表示这个过程，并将它分别分发给我们的 reducer 函数和 store。
-- -------------------- ---- -------
-------- ------------- ------ -
------ -
----- -----------
-------- -
--- -----------
-----
-----
-
--
-
-------------------------------- ------
--------------------------------- -------上面的代码展示了如何向 store 添加两个商品。我们定义了一个 addItem 动作创建器函数，它接受参数 name 和 price，同时返回一个 action 对象。我们使用 store.dispatch 函数分发这些动作，将它们传递给 store 并更新状态。
移除商品
我们还希望能够从购物车中移除商品。我们将使用一个 action 来表示这个过程，并将它分别分发给我们的 reducer 函数和 store。
-- -------------------- ---- -------
-------- -------------- ------ -
------ -
----- --------------
-------- -
---
-----
-
--
-
---------------------------- ------上面的代码展示了如何从 store 中移除商品。我们定义了一个 removeItem 动作创建器函数，它接受 id 和 price 参数，并返回一个 action 对象。我们使用 store.dispatch 函数分发这些动作，将它们传递给 store 并更新状态。
获取状态
现在我们已经向 store 中添加了商品并从中移除了商品。但是，我们如何访问购物车的当前状态呢？我们可以使用 store.getState() 方法来获取 store 的当前状态。
console.log(store.getState());
在控制台中执行上面的代码，我们将得到以下结果：
{
items: [
{ id: 1, name: 'iPhone', price: 999 },
{ id: 2, name: 'MacBook', price: 1999 }
],
total: 2998
}总结
在本文中，我们向读者展示了如何使用 Redux 实现购物车功能的应用程序状态管理。我们首先创建了一个 store 并定义了一个 reducer 函数。接着，我们使用动作创建器函数分别将商品添加到购物车中和从购物车中移除商品。最后，我们访问了 store 的当前状态。
这个实例向读者展示了如何使用 Redux 管理简单的应用程序状态，同时也为读者提供了使用 Redux 构建更复杂的应用程序的基础。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64603717968c7c53b01f8d34