介绍
@redux-up/hooks 是一个能够为 Redux 应用提供更好的开发体验并提高代码复用率的 npm 包。它提供了一组 React Hooks，以简单且可预测的方式管理 Redux 状态并使你的应用更加直观和高效。
安装和使用
使用 @redux-up/hooks 前，需要先安装 Redux。在使用 React 应用中，可以通过以下命令安装 @redux-up/hooks：
npm install --save @redux-up/hooks
或者
yarn add @redux-up/hooks
在你的项目中，需要使用 Redux 的 createReduxStore 来创建 store。同时，你需要将你的 store 通过引入 Provider 组件提供给你的 React 应用。
-- -------------------- ---- -------
------ - ---------------- - ---- -----------------
------ - -------- - ---- --------------
------ ----------- ---- ----------------
----- ----- - -------------------
-------- ----- -
------ -
--------- --------------
------------ --
-----------
--
-
------ ------- ----支持的 Hooks
useIsLoading
useIsLoading 可以从全局的 Redux 状态中读取 isLoading 字段。
-- -------------------- ---- -------
------ - ------------ - ---- ------------------
-------- ------------- -
----- --------- - ---------------
------ -
-----
---------- - -
-----------------
- - -
------- --
--
------
--
-useReduxState
useReduxState 是一个能够监听 Redux store 变化并返回相应 state 的 Hook。
-- -------------------- ---- -------
------ - ------------- - ---- ------------------
-------- ------------- -
----- ----- - ------------------- -- -------------
------ -
---- ----------- -- -------------------
--- ----- -- --------------
------
--
-useStatefulSelector
useStatefulSelector 是在 useReduxState 基础上的封装，能够缓存结果并且不会在每次渲染时执行 mapStateToProps。
-- -------------------- ---- -------
------ - ------------------- - ---- ------------------
-------- ------------- -
----- ----- - --------------------
----- -- ------------
------ -- ------------------
--
------ -
---- ----------- -- -------------------
--- ----- -- --------------
------
--
-useBindActions
useBindActions 可以将 action creator 绑定为 React 组件的属性，类似 mapDispatchToProps。
-- -------------------- ---- -------
------ - -------------- - ---- ------------------
-------- ------------- ---------- --------- -- -
------ -
-----
------- ------------------------------
------- ------------------------------
------
--
-
------ ------- ----------------
---------- -- -- -- ----- ----------- ---
---------- -- -- -- ----- ----------- ---
----------------结论
使用 @redux-up/hooks 可以让你的 Redux 应用更加高效且直观。通过以上示例，你可以更好地理解如何使用该 npm 包，并从中学习到更好的代码复用技巧。
现在你已经准备好在你的项目中尝试使用 @redux-up/hooks 了！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d530d0927023822a7e