在 React 应用中，Redux 是一个非常流行的状态管理库。通过 Redux，我们可以在应用程序的不同组件之间共享数据。但是，在某些情况下，多个组件需要访问相同的 Redux 数据，这可能会导致代码冗余和维护困难。这时候，React-Redux 连接器（Connector）就能派上用场了。
什么是 React-Redux 连接器？
React-Redux 连接器是一种在 React 应用程序中使用的高阶组件（Higher Order Component）。它的作用是将 Redux 的状态和行动转换成 React 组件的属性，并将组件中的事件处理程序转换为 Redux 行动。通过使用连接器，我们可以将 Redux 状态和行动与组件的生命周期和事件处理程序联系起来，从而简化了 Redux 的使用。
如何使用 React-Redux 连接器？
使用 React-Redux 连接器的第一步是安装它。可以通过 npm 包管理器进行安装：
npm install --save react-redux
安装完成后，可以在应用程序中导入连接器：
import { connect } from 'react-redux';连接器是一个高阶组件，它接受两个参数：mapStateToProps 和 mapDispatchToProps。这些参数定义了如何将 Redux 状态和行动转换为 React 组件的属性和事件处理程序。
mapStateToProps
mapStateToProps 是一个函数，它将 Redux 状态转换为组件的属性。该函数接受一个状态对象作为参数，并返回一个包含组件所需属性的对象。例如，以下 mapStateToProps 函数将将 Redux 中的 count 状态映射到组件的 props 中：
const mapStateToProps = state => ({
count: state.count
});在组件中使用 mapStateToProps 函数：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
----- ------- - -- ----- -- -- -
-----
---------- ------------
------
--
----- --------------- - ----- -- --
------ -----------
---
------ ------- ----------------------------------mapDispatchToProps
mapDispatchToProps 是一个函数，它将 Redux 行动转换为组件的事件处理程序。该函数接受一个 dispatch 函数作为参数，并返回一个包含组件所需事件处理程序的对象。例如，以下 mapDispatchToProps 函数将将 Redux 中的 increment 行动映射到组件的 props 中：
const mapDispatchToProps = dispatch => ({
increment: () => dispatch({ type: 'INCREMENT' })
});在组件中使用 mapDispatchToProps 函数：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
----- ------- - -- ------ --------- -- -- -
-----
---------- ------------
------- --------------------------------------
------
--
----- --------------- - ----- -- --
------ -----------
---
----- ------------------ - -------- -- --
---------- -- -- ---------- ----- ----------- --
---
------ ------- ------------------------ -----------------------------使用多个连接器
在某些情况下，我们可能需要在同一个组件中使用多个连接器。在这种情况下，我们可以将多个连接器组合成一个连接器，以便将 Redux 状态和行动转换为组件的属性和事件处理程序。可以使用 Redux 提供的 compose 函数将多个连接器组合起来：
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - ------- - ---- --------
----- ------- - -- ------ --------- -- -- -
-----
---------- ------------
------- --------------------------------------
------
--
----- --------------- - ----- -- --
------ -----------
---
----- ------------------ - -------- -- --
---------- -- -- ---------- ----- ----------- --
---
----- ------- - --------
------------------------ --------------------
-- --- ---- ---------- ----
--
------ ------- -----------------结论
React-Redux 连接器是一个非常有用的工具，它可以帮助我们简化 Redux 状态和行动在 React 应用程序中的使用。通过使用连接器，我们可以将 Redux 状态和行动与组件的生命周期和事件处理程序联系起来，从而实现更高效的代码和更好的可维护性。
示例代码
以下是一个示例应用程序，其中使用了 React-Redux 连接器。该应用程序包括一个计数器组件和一个按钮组件，它们都使用相同的 Redux 状态和行动。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
----- ------- - -- ------ --------- -- -- -
-----
---------- ------------
------- --------------------------------------
------
--
----- ------ - -- --------- -- -- -
------- --------------------------------------
--
----- --------------- - ----- -- --
------ -----------
---
----- ------------------ - -------- -- --
---------- -- -- ---------- ----- ----------- --
---
----- -------------- - ------------------------ --------------------
----- ------------- - ------------- --------------------
------ ----- --------------- - ------------------------
------ ----- -------------- - ----------------------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6760065803c3aa6a56fbc962