简介
redux 是一个流行的状态管理库，但它的 API 过于繁琐，使用也有一定的限制。@agargamosa/redux-hooks 是一个针对 redux 的 react hooks 封装库，让我们能够轻松使用 redux 的状态管理功能。在这篇文章中，我们将介绍如何在我们的 react 项目中使用 @agargamosa/redux-hooks。
安装
通过 npm 安装 @agargamosa/redux-hooks：
npm install @agargamosa/redux-hooks --save
使用
Provider
为了使用 redux-hooks，我们需要将 redux store 注入到 react 组件中。和原生的 redux 一样，我们需要使用 Provider 组件包裹整个应用程序。在 Provider 中传入我们创建的 store 即可。例如：
// store.js import { createStore } from 'redux'; import reducer from './reducer'; const store = createStore(reducer); export default 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
