简介
redux 是一个流行的状态管理库，但它的 API 过于繁琐，使用也有一定的限制。@agargamosa/redux-hooks 是一个针对 redux 的 react hooks 封装库，让我们能够轻松使用 redux 的状态管理功能。在这篇文章中，我们将介绍如何在我们的 react 项目中使用 @agargamosa/redux-hooks。
安装
通过 npm 安装 @agargamosa/redux-hooks：
--- ------- ----------------------- ------
使用
Provider
为了使用 redux-hooks，我们需要将 redux store 注入到 react 组件中。和原生的 redux 一样，我们需要使用 Provider 组件包裹整个应用程序。在 Provider 中传入我们创建的 store 即可。例如：
-- -------- ------ - ----------- - ---- -------- ------ ------- ---- ------------ ----- ----- - --------------------- ------ ------- ------
在我们的应用程序的入口处，我们需要将Provider组件包裹在我们的App组件外面，将这个store传递给Provider:
------ ----- ---- --------
------ - -------- - ---- --------------------------
------ ----- ---- ----------
------ --- ---- --------
-------- ------ -
------ -
--------- --------------
---- --
-----------
--
-
------ ------- -----使用 hooks
现在我们已经把 store 注入到了我们的项目中，我们可以使用 react 的 hooks 来使用 redux。首先，我们需要从 react-redux 中导入所需的 hook。现在我们可以使用 useMappedState 和 useDispatch 这两个 hook。
useMappedState
useMappedState 允许我们使用 store 的 state 中的一部分值。我们可以使用它来选择我们需要的特定的状态，而不必每次都使用全局状态。举个例子：
------ - -------------- - ---- --------------------------
----- --------- - -- -- -
----- - ----- - - -------------------- -- --
------ -----------
----
------ -
----
--------------- -- -
--- --------------
-----------
-----
---
-----
--
--useDispatch
useDispatch 允许我们在使用 redux 时 dispatch actions。我们可以使用它将 action 函数作为参数并在需要时调用它。举个例子：
------ - ----------- - ---- --------------------------
----- --------- - -- -- -
----- -------- - --------------
----- ----------- - -- -- -
----------
----- -----------
-------- -
--- --
----- ---- -----
-
---
--
------ -
------- ----------------------
--- ----
---------
--
--将多个 hook 组合在一起
现在我们已经了解了如何使用 useMappedState 和 useDispatch 来访问我们的 redux store，我们可以将它们结合起来使用：
------ - ------------ -------------- - ---- --------------------------
----- --------- - -- -- -
----- -------- - --------------
----- - ---------- ----- - - -------------------- -- --
---------- -------------------
------ -----------
----
----- -------------------- - -- -- -
---------- ----- ----------- -------- - ----- ---- ----- - ---
--
----- ---------------------- - -- -- -
---------- ----- ------------- ---
--
------ -
-----
--------- -- ------ ---------------
----
--------------- -- -
--- --------------
-----------
-----
---
-----
------- -------------------------------
--- ----
---------
------- ---------------------------------
----- -----
---------
------
--
--这里我们通过 useMappedState 来获取了 state 中的两个数据项，然后使用 useDispatch 来 dispatch 两个 action。当 'Add Item' button 被点击时，我们会 dispatch 'ADD_ITEM' action，向数组中添加一个新的 item。当 'Clear Items' button 被点击时，我们会 dispatch 'CLEAR_ITEMS' action，清空数组中所有的 items。
完整示例代码
------ ----- ---- --------
------ - --------------- ----------- - ---- --------------------------
----- --------- - -- -- -
----- -------- - --------------
----- - ---------- ----- - - -------------------- -- --
---------- -------------------
------ -----------
----
----- -------------------- - -- -- -
---------- ----- ----------- -------- - ----- ---- ----- - ---
--
----- ---------------------- - -- -- -
---------- ----- ------------- ---
--
------ -
-----
--------- -- ------ ---------------
----
--------------- -- -
--- --------------
-----------
-----
---
-----
------- -------------------------------
--- ----
---------
------- ---------------------------------
----- -----
---------
------
--
--总结
在本文中，我们介绍了如何使用 @agargamosa/redux-hooks 来优雅地管理 redux 状态，而不再需要编写样板代码。我们看到了如何在 React 中使用这个库的基本结构，以及如何将多个 hooks 组合在一起以访问 store 和 dispatch actions。如果你在使用 redux 的过程中感到疲惫，请试试使用 @agargamosa/redux-hooks 来让你的工作更加轻松。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/151042