什么是 san-store-hook？
san-store-hook 是一个基于 san-store 模块的封装，提供 hooks 形式的 API 及其相关函数，它可以帮助开发者快速实现 React Hooks 形式的数据连接和状态管理。
san-store-hook 通过 hooks 的形式，让开发者可以更加直观地管理数据状态，并且兼容了 React Hooks API，并扩展了相关 API。
san-store-hook 的使用
下面将会介绍 san-store-hook 的使用方法及具体实现方法：
安装
使用 npm 安装 san-store-hook：
npm install san-store-hook --save
引入
引入 san-store-hook：
import { useStore, useDispatch, useSelector } from "san-store-hook";useStore
在函数组件中使用 useStore 钩子可以获取到 state 和 store 注入到当前组件中，它的具体用法如下：
-- -------------------- ---- -------
------ - -------- - ---- -----------------
-------- ----- -
----- ------- ------ - -----------
------ -
-----
----------------------
------- ----------- -- ----------------------------------------
------- ----------- -- ----------------------------------------
------
--
-上述代码中，我们使用了 useStore 钩子获取到了 state 和 store，然后将 count 展示在页面中，并为加一和减一按钮绑定了 dispatch 事件。
useDispatch
在函数组件中使用 useDispatch 钩子可以获取一个 dispatch 函数，它的具体用法如下：
-- -------------------- ---- -------
------ - ----------- - ---- -----------------
-------- ----- -
----- -------- - --------------
------ -
-----
----------------------
------- ----------- -- ----------------------------------
------- ----------- -- ----------------------------------
------
--
-上述代码中，我们使用了 useDispatch 钩子获取到了 dispatch 函数，然后将 count 展示在页面中，并为加一和减一按钮绑定了 dispatch 事件。
useSelector
在函数组件中使用 useSelector 钩子可以获取 store 中的 state，它的具体用法如下：
-- -------------------- ---- -------
------ - ----------- - ---- -----------------
-------- ----- -
----- ----- - ------------------- -- -------------
------ -
-----
----------------
------
--
-上述代码中，我们使用了 useSelector 钩子获取到了 count，然后将 count 展示在页面中。
示例代码
下面是使用 san-store-hook 实现计数器的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- ----------- - ---- -----------------
-------- ----- -
----- ------- ------ - ----------
------ --
---
----- -------- - --------------
------ -
-----
----------------------
------- ----------- -- ----------------------------------------
------- ----------- -- ----------------------------------------
------
--
-
------ ------- ----上述代码中，我们使用了 useStore 和 useDispatch 钩子获取到了 state、store 和 dispatch 函数，然后将 count 展示在页面中，并为加一和减一按钮绑定了 dispatch 事件。
总结
san-store-hook 可以帮助开发者快速实现 React Hooks 形式的数据连接和状态管理。通过这篇文章学习后，相信大家已经掌握了 san-store-hook 的使用方法以及如何在函数组件中使用 san-store-hook。同时，也了解了如何通过 useStore、useDispatch 和 useSelector 实现状态数据的管理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005663d81e8991b448e2437