简介
React是当前最流行的前端框架之一，React Hook作为React的新特性，可以帮助我们更方便地管理组件状态。但是当我们需要使用Redux来管理应用中的状态时，Redux的用法可能会对我们的项目架构带来一些不必要的复杂性。因此，我们可以使用react-hook-redux来简化Redux在React应用中的使用。
安装
使用npm安装：
--- - ----------------
使用yarn安装：
---- --- ----------------
基本用法
react-hook-redux提供了三个hook来使用redux：
useSelector：获取 redux store 中的数据useDispatch：发送 redux actionuseStore：获取redux store
useSelector
useSelector是 connect 函数的替代品，用于从redux store中提取数据。
在函数式组件中，你可以这样使用useSelector hook：
------ - ----------- - ---- ------------------
-------- ----- -
----- ----- - ----------------- -- ------------
------ -
-----
------------ ------------
------
-
-这个例子中，我们从redux store中提取count值，并使用它来渲染组件。
useDispatch
useDispatch hook 用于发送 actions。在函数式组件中使用 useDispatch hook 和传统的 Redux 中使用 mapDispatchToProps 的方法相似。
------ - ----------- - ---- ------------------
-------- ----- -
----- -------- - -------------
------ -
-----
------- ----------- -- ---------- ----- ----------- ----
---------
---------
------
-
-在这个例子中，我们通过 useDispatch hook 获取 dispatch 函数，并通过 onClick 事件发送 INCREMENT action。
useStore
useStore hook 返回 redux store。
------ - -------- - ---- ------------------ -------- ----- - ----- ----- - ---------- ----------------------------- ------ ----------- -
在这个例子中，我们使用 useStore hook 获取 redux store，并打印出 store 的值。
示例代码
我们可以用一个计数器的例子来看看如何使用 react-hook-redux。
首先，创建一个 Redux store：
------ - ----------- - ---- -------
----- ------------ - - ------ - -
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - -
---- ------------
------ - --------- ------ ----------- - - -
--------
------ -----
-
-
----- ----- - --------------------现在，我们可以用 react-hook-redux 来连接我们的React组件到 Redux store 上。我们将在我们的应用程序中使用 useSelector 和 useDispatch hooks。
App.js
------ ----- ---- -------
------ - ------------ ----------- - ---- ------------------
-------- ----- -
----- ----- - ----------------- -- ------------
----- -------- - -------------
------ -
---- ----------------
------------ ------------
------- ----------- -- ---------- ----- ----------- ----------------------
------- ----------- -- ---------- ----- ----------- ----------------------
------
-
-
------ ------- ---使用useSelector，我们从redux store中提取count值。通过useDispatch，我们获取dispatch函数，可以使用它来发送INCREMENT和DECREMENTaction。 当我们点击‘增加’或‘减少’按钮时，它将触发对应的 action，这样我们就能在UI更新了。
现在，我们运行这个应用程序时，应该会看到一个带有两个按钮的计数器应用程序，它将自动更新计数器。
这就是 react-hook-redux 的基本用法和一个简单的示例应用程序。它使我们能够更轻松地管理redux store中的状态，而不必编写专用的 redux- connect 函数。
结论
react-hook-redux 是一个方便的 npm 包，它为使用 Redux 在 React 应用程序中管理状态提供了简化的解决方案。通过useSelector，useDispatch和useStore hooks，我们能够更方便地连接 React 组件与 Redux store，并发送 actions，从而更轻松地维护应用程序的状态。
为了更深入地使用它，请随时访问 官方文档。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600668fbd9381d61a3541021