介绍
rehoc 是一个能够帮助你使用 React Hooks 简化 Redux 相关代码的 npm 包。使用 rehoc，你可以更加方便快捷地进行状态管理，提高编码效率和代码可读性。
安装
安装 rehoc 非常简单，只需要在终端命令行中输入：
npm install rehoc
或者
yarn add rehoc
使用
创建 store
首先，你需要定义你的 Redux store。Rehoc 支持使用 createStore 函数来创建，例如：
-- -------------------- ---- -------
------ - ----------- - ---- -------
----- ------------ - -
------ -
-
----- ------- - ------- ------- -- -
------------------- -
---- ------------
------ - ------ ----------- - - -
---- ------------
------ - ------ ----------- - - -
--------
------ -----
-
-
------ ----- ----- - ------------------------- --------在上述代码中，我们定义了一个名为 store 的全局 Redux store，它的初始值为 { count: 0 }，使用 reducer 处理 action，分别对 increment 和 decrement 作出了不同的响应。
创建 HOC
然后，我们需要创建一个 HOC（Higher Order Component），它用于连接 React 组件和 Redux store，将状态和操作映射到组件的 props 中。在 Rehoc 中，可以使用 withStore 函数来构建 HOC：
-- -------------------- ---- ------- ------ - --------- - ---- ------- ------ - ----- - ---- --------- ----- -------- - ----- -- -- ------ ----------- -- ----- ----------- - -------- -- -- ---------- -- -- ---------- ----- ----------- --- ---------- -- -- ---------- ----- ----------- -- -- ------ ----- ----------- - ---------------- --------- ------------
在上述代码中，我们使用 withStore 函数创建了一个名为 withCounter 的 HOC，它接受三个参数：
store：要连接的 Redux store；mapState：将 state 映射到组件 props 的函数；mapDispatch：将 dispatch 映射到组件 props 的函数。
使用 HOC
最后，我们可以在 React 组件中使用我们刚刚创建的 withCounter HOC，将其应用到组件上，如下：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ----------- - ---- ---------------
----- ------- ------- --------------- -
-------- -
----- - ------ ---------- --------- - - ----------
------ -
-----
--------- -----------
------- ------------------------------
------- ------------------------------
------
-
-
-
------ ------- --------------------在上述代码中，我们使用 withCounter 将 React 组件 Counter 与 Redux store 进行连接，并在其 props 中获得了 count、increment 和 decrement 三个属性值。这三个属性值分别表示了当前的计数器值，以及增加和减少计数器的方法。
示例代码
-- -------------------- ---- -------
------ - ----------- - ---- -------
------ - --------- - ---- -------
------ ----- ---- -------
----- ------------ - -
------ -
-
----- ------- - ------- ------- -- -
------------------- -
---- ------------
------ - ------ ----------- - - -
---- ------------
------ - ------ ----------- - - -
--------
------ -----
-
-
------ ----- ----- - ------------------------- --------
----- -------- - ----- -- --
------ -----------
--
----- ----------- - -------- -- --
---------- -- -- ---------- ----- ----------- ---
---------- -- -- ---------- ----- ----------- --
--
------ ----- ----------- - ---------------- --------- ------------
----- ------- ------- --------------- -
-------- -
----- - ------ ---------- --------- - - ----------
------ -
-----
--------- -----------
------- ------------------------------
------- ------------------------------
------
-
-
-
------ ------- --------------------上述代码示例展示了如何使用 Rehoc 来管理 React 组件的状态，包含了使用 createStore 和 withStore 函数的详细使用方法，以及一个简单的计数器组件的编写过程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067355890c4f7277583bba