前言
随着前端技术的日新月异，越来越多的框架和库被推出。其中，Redux 是一种卓越的状态容器，常常用于 React 应用程序中。redux-select 包则提供了一个简单且有效的方式来选择 Redux 中存储的数据。在这篇文章中，我们将深入了解 redux-select 的使用方法，帮助开发者更好的使用 Redux。
redux-select 简介
redux-select 是一个用于选择 Redux 存储数据的小型 JavaScript 库。它是 Redux 官方推荐的选择库，并在 React 应用程序和 React Native 等项目中广泛使用。redux-select 具有以下特点：
- 灵活性：redux-select 提供了许多方法，允许您完全自定义选择器。这使得它非常适合处理各种变化的数据。
- 可靠性：redux-select 是一个经过良好测试并缺陷较少的 JavaScript 库。
- 易于使用：redux-select 的使用非常简单，您只需定义一个选择器函数并将其传递给 connect 函数即可完成所有工作。
安装 redux-select
在使用 redux-select 之前，您需要将其下载、安装并配置到您的项目中。您可以使用下列命令进行安装：
npm install --save reselect
redux-select 函数
为了使用 redux-select，您需要知道以下两个基本函数：
createSelector 函数
createSelector 函数是 redux-select 的主要方法之一。您可以使用此方法创建选择器函数。此函数将选择器函数和数据源作为其参数，并返回一个新函数，该新函数将只执行在数据源中检索所需信息的部分，并在需要时进行标准化。
例如，以下代码是一个选择器函数，它获取 state.employee 中所有的雇员，然后按姓名字母顺序排序：
import { createSelector } from "reselect";
const employeesSelector = state => state.employees;
export const sortedEmployeesSelector = createSelector(
employeesSelector,
employees => employees.sort((a, b) => a.name.localeCompare(b.name))
);在此示例中，我们首先使用 state.employees 创建自定义选择器函数employeesSelector，最终，我们使用创建 createSelector 创建了一个新的选择器函数sortedEmployeesSelector。此函数获取 employeesSelector 和数据源作为其参数，并执行所需的操作（在这种情况下对雇员名称进行排序）。
请注意，这个新选择器函数sortedEmployeesSelector 可以轻松与应用程序的其他部分集成，这就是 redux-select 所提供的强大功能之一。
connect 函数
connect 函数是 redux-select 的另一个重要方法。connect 函数将选择器函数与 React 组件相连接，以便每当必要时更新组件。
此方法与 Redux 密切相关，因为 Redux 是一个基于 JavaScript 模块的单向数据流系统。connect 函数把模块和组件连接到 Redux Store，当模块的状态发生变化时，它会通知组件进行相应的更新。
以下是一个示例，演示了如何使用 connect 以及预先定义的选择器函数 employeesSelector：
-- -------------------- ---- ------- ------ - ------- - ---- -------------- ------ - ----------------------- - ---- -------------- ----- ----------- - ----- -- - -- --- - ----- --------------- - ----- -- -- ---------- ------------------------------- --- ------ ------- -------- ---------------- ----- ---------------
在此示例中，我们定义了一个名为 sortedEmployeeSelector 的自定义选择器函数，并将其与 Redux Store 中的 employees 数据源进行了连接。我们还定义了 mapStateToProps 函数，用于将全局状态对象映射到 myComponent 的 props 参数中。
最后，我们使用 connect 函数将 myComponent 与 Redux Store 进行了连接，并将映射 state 到 props 的函数作为参数传递给 connect 函数。
基本示例
现在，我们已经了解了 redux-select 的一些基本概念，让我们创建一个基本示例，演示如何使用 redux-select。
应用场景
我们将创建一个电子商务应用程序，用于显示产品清单。在这种情况下，我们将创建以下功能：
- 从 Store 中检索所有产品
- 从 Store 中检索包含指定商品 ID 的产品
- 根据价格对产品进行排序
前置条件
在开始之前，请确保在您的 React 应用程序中已配置了 Redux，并且您已经安装了 redux-select 软件包。
准备工作
我们首先需要在 Redux-Store 中定义一些产品数据，以便可以创建自定义选择器函数和 connect 函数。以下是模拟的产品列表数据：
const products = [
{ id: 1, name: "Product A", price: 20 },
{ id: 2, name: "Product B", price: 10 },
{ id: 3, name: "Product C", price: 50 },
{ id: 4, name: "Product D", price: 30 },
{ id: 5, name: "Product E", price: 25 },
];接下来，我们将定义一个 reducer 函数，该函数将更新 Store 的状态。在此示例中，我们将使用常规 reducer 函数实现此操作，但在实际应用程序中，您可能需要使用特定库中提供的 reducer 生成器。
-- -------------------- ---- -------
----- ------------ - -
--------- ---
--
----- -------------- - ------ - ------------- ------- -- -
------ ------------- -
---- -------------------------
------ -
---------
--------- ----------------
--
--------
------ ------
-
--选择器函数示例
现在，让我们定义一些自定义选择器函数以获取 Store 中的产品信息和根据价格对产品进行排序。
-- -------------------- ---- ------- ------ - -------------- - ---- ----------- ----- ----------- - ----- -- --------------- ------ ----- ---------------------- - --------------- ------------ -------- -- ----------------- -- -- ------- - -------- -- ------ ----- ---------------------- - --------------- ------------- ------- ------ -- ---------- ---------- --- -- --------------------- -- ---------- --- --- --
在此示例中，我们定义了两个选择器函数。第一个函数 sortedProductsSelector 将数组中的所有产品按价格从低到高进行排序。第二个 getProductByIdSelector将搜索 Store 中所有的产品，并返回包含所选商品 ID 的产品数据。
在 React 组件中使用选择器函数
现在，我们将通过使用 connect 函数在 React 组件中使用我们的选择器函数。以下是一个示例，演示了如何在组件中使用选择器函数：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ -
-----------------------
-----------------------
- ---- --------------
----- -------- - -- -------- -- -- -
----
--------------------- -- -
--- ------------------------------- - --------------------
---
-----
--
----- ------- - -- ------- -- -- -
--
-----------------------
--------- -------------------
---
--
----- --------------- - ------- --------- -- --
--------- ------------------------------
-------- ----------------------------- ----------
---
------ ----- ----------------- - -----------------------------------
------ ----- ---------------- - ----------------------------------在此示例中，我们首先定义了两个 React 组件，Products 和 Product。接下来，我们定义了一个名为 mapStateToProps 的函数，并使用该函数将 props 中得到的整个 state 映射到 props 中。在 mapStateToProps 函数中，我们使用 sortedProductsSelector 选择器将产品列表按价格排序，然后使用 getProductByIdSelector 选择器获取所选商品的数据。
最后，我们使用 connect 函数将 state 和组件连接起来，并将两个组件实例导出。
总结
redux-select 是一个非常有用的软件包，它可以帮助开发人员管理和选择 Redux Store 中的数据。本文介绍了创建选择器函数和连接函数的方法，以及如何在 React 应用程序中使用它们。在实际项目中，redux-select 可能会与项目以及其它软件包产生一些特殊的问题，但是理解这些基础内容可以使您更好地开始使用 redux-select。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8af9