Redux 是一个流行的 JavaScript 应用程序状态管理工具。它提供了一种可预测的方式来管理应用程序的状态，并且具有可扩展性、测试性和可维护性。在 Redux 中，所有的应用程序状态都存储在一个单一的状态树中。这使得状态的管理变得简单明了。本文将介绍如何使用 Selector 获取状态。
Selector 是什么？
Selector 是一个函数，它从 Redux 状态树中选择一部分状态并返回。Selector 通常用于获取派生状态（即从原始状态计算而来的状态）。例如，如果我们有一个状态树，其中包含一个订单列表和一个商品列表，则可以使用 Selector 来计算每个订单的总金额。
Selector 的优势
使用 Selector 有以下优势：
避免重复计算：使用 Selector 可以避免在每次访问状态时重复计算派生状态。
提高性能：Selector 可以缓存结果并只在必要时重新计算。
使代码更易于维护：使用 Selector 可以将派生状态的计算逻辑从组件中提取出来，使代码更易于维护。
如何编写 Selector
编写 Selector 非常简单。Selector 应该是一个纯函数，它接收状态作为参数并返回派生状态。以下是一个示例 Selector：
-- -------------------- ---- -------
----- ------------- - ------- -- -
----- ----- - --------------------------
----- -------- - ---------------------------
----- ----- - ------------------------ ----- -- -
----- ------- - ----------------- -- ---- --- ----------------
------ --- - ------------- - --------------
-- ---
------ ------
--在上面的示例中，我们使用当前订单和所有商品计算订单的总金额。这个 Selector 可以在组件中使用，如下所示：
const mapStateToProps = (state) => {
return {
orderTotal: getOrderTotal(state),
};
};联合使用多个 Selector
我们可以将多个 Selector 组合在一起，以便更容易地获取复杂的派生状态。例如，以下是一个使用两个 Selector 计算订单状态的示例：
-- -------------------- ---- -------
----- ------------- - ------- -- --------------------------------
----- ----------- - ------- -- ---------------------------
----- -------------- - ---------------
--------------- -------------
------- --------- -- -
----- -------- - ------------ - --
----- ----------- - --------------- - --
------ -------- -- ----------- - ---------- - -------------
-
--在上面的示例中，我们使用两个 Selector 获取订单项和商品列表。然后，我们使用 createSelector 函数将这两个 Selector 组合在一起，以便计算订单状态。这个 Selector 可以在组件中使用，如下所示：
const mapStateToProps = (state) => {
return {
orderStatus: getOrderStatus(state),
};
};结论
Selector 是一个非常有用的工具，它可以帮助我们获取派生状态并提高应用程序的性能。Selector 的编写非常简单，只需要将计算逻辑提取出来并将它们组合在一起即可。在实际的应用程序中，Selector 可以帮助我们更好地管理状态，并使代码更易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67583a3a5b8c5cbb5f7e05cb