本文将为你详细介绍 npm 包 redux-simple-connect 的使用方法以及相关知识点。
什么是 redux-simple-connect
redux-simple-connect 是一个帮助你更加简单快捷地将 React 组件与 Redux 连结的 npm 包。它提供了一个高阶组件，使得组件中可以直接调用 Redux 的操作，而不需要手动编写 mapStateToProps 和 mapDispatchToProps，还支持使用 Hooks。
设置
安装
在项目中使用 npm 安装 redux-simple-connect：
npm install --save redux-simple-connect
使用
在组件中引入 connect 方法并使用它包裹要连接到 Redux 的组件，即可使用 Redux 操作。示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- -----------------------
----- -------- ------- --------------- -
------------------- -
-- -- ------------------- -- ------------------
--------------------- ----- ------------- ---
-
-------- -
------ -
----
-------------------------- -- -
--- ------------------------------
---
-----
--
-
-
----- -------- - ----- -- --
------ ------------
---
------ ------- ----------------------------以上代码中，我们仅仅定义了一个名为 mapState 的方法，它从 Redux state 中获取并返回了 users 属性。
在组件中，我们通过 connect(mapState)(UserList) 把组件连接到了 Redux‘。这意味着，当 Redux 中 users 属性更新时，组件也将被重新渲染。
组件内部可以直接使用 this.props.dispatch，而不用在外部显式地使用 mapDispatchToProps，以在组件内部调用 Redux 操作。
Hooks 的使用
connect 同时支持使用 Hooks。我们可以使用 useSelector 和 useDispatch 代替 connect，并使用它所提供的方法来获取 redux store 和 dispatch 方法。示例：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------------ ----------- - ---- -----------------------
-------- ---------- -
----- ----- - ----------------- -- -------------
----- -------- - --------------
------------ -- -
---------- ----- ------------- ---
-- ------------
------ -
----
--------------- -- -
--- ------------------------------
---
-----
--
-
------ ------- ---------以上代码中，通过调用 useSelector 方法来获取 Redux state 中的 users 属性，使用 useDispatch 获取 dispatch 方法。通过调用 useEffect 在组件加载时进行数据获取。
总结
redux-simple-connect 是一个很有用的 npm 包，它让我们在开发 React 应用时更加方便、快捷地使用 Redux，同时也支持使用 Hooks，使我们更加灵活高效地编写代码。
在开发时，我们可以使用它提供的 connect 方法，通过 mapState 和 mapDispatch 来方便地获取 Redux 的 state 和 dispatch 方法。
同时，为了更好的性能，推荐优先使用 Hooks。我们可以使用 useSelector 和 useDispatch 来获取相关 store 和方法，在组件内部进行操作。
希望这篇文章对你有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8b55