React 是一种广泛使用的前端框架，而 Redux 则是一种管理状态的库。React 和 Redux 的组合有助于创建高效、可维护的 Web 应用程序。而在实际项目中使用 React 和 Redux 的关键就在于连接它们。
为了方便开发者更好地连接 React 和 Redux，社区中出现了许多第三方库和工具。其中，react-redux-connected 是一款非常实用的库，其使用可以使得连接 React 和 Redux 更加高效、方便。下面让我们来深入了解 react-redux-connected 的使用方法。
安装 react-redux-connected
可以通过 npm 包管理器来安装 react-redux-connected，首先要确认本地已经安装了 React 和 Redux：
npm install --save react-redux-connected
使用 react-redux-connected
安装完 react-redux-connected 之后，我们可以通过 connect(mapStateToProps, mapDispatchToProps)(YourComponent) 方法来将 React 组件连接到 Redux 中。
其中，mapStateToProps 和 mapDispatchToProps 是两个参数，分别用于将 Redux 状态对象中的部分属性映射到组件的 props 中，以及将行为派发到 Redux Store 中。下面是详细的使用流程和示例：
步骤一：创建 Redux Store
创建一个 Store，然后使用 createStore() 方法传入 reducer 函数来创建 Store 对象。如：
import { createStore } from 'redux';
import rootReducer from './reducers';
const store = createStore(rootReducer);这里的 rootReducer 指代的是一个包含所有 reducer 函数的对象。
步骤二：将 connect() 包装组件
接下来，用 connect() 方法将组件包装一下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
----- ------------- ------- --------------- -
-------- -
------ -
-----
-------------
------
--
-
-
----- --------------- - ------- -- -
------ -
-------- -------------
--
--
----- ------------------ - ---------- -- -
------ -
---------- -- -- -
---------- ----- ----------- ---
-
--
--
------ ------- ------------------------ -----------------------------------步骤三：使用 connect() 后的组件
完成了前两个步骤之后，我们就可以在 React 组件中使用 Redux 的状态和动作了。具体来说，我们可以通过 this.props.counter 访问 Redux 的状态对象，并通过 this.props.increment() 触发一个派发动作。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
----- ------------- ------- --------------- -
-------- -
------ -
-----
------------ -------------------------
------- -------------------------------------------------
------
--
-
-
----- --------------- - ------- -- -
------ -
-------- -------------
--
--
----- ------------------ - ---------- -- -
------ -
---------- -- -- -
---------- ----- ----------- ---
-
--
--
------ ------- ------------------------ -----------------------------------此时，我们的组件就已经成功地连接到了 Redux 中。
总结
react-redux-connected 可以极大地帮助我们提高连接 React 和 Redux 的效率和便捷程度。通过它的使用，我们可以轻松地将 Redux 中的状态和动作传递到 React 中，因此具有非常重要的实践意义和学习意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600554f281e8991b448d2295