简介
React是当前最流行的前端框架之一，React Hook作为React的新特性，可以帮助我们更方便地管理组件状态。但是当我们需要使用Redux来管理应用中的状态时，Redux的用法可能会对我们的项目架构带来一些不必要的复杂性。因此，我们可以使用react-hook-redux来简化Redux在React应用中的使用。
安装
使用npm安装：
npm i react-hook-redux
使用yarn安装：
yarn add react-hook-redux
基本用法
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
