前言
redux 是 React 生态圈中的一种管理全局 state 的方案，但是使用 redux 需要编写大量的冗余代码。为了解决这个问题，社区也开发了许多辅助工具和插件，redux-hook-middleware 就是其中之一。本文将详细介绍如何使用 redux-hook-middleware，以帮助你更好的管理你的全局 state。
redux-hook-middleware 简介
redux-hook-middleware 是一个 redux 的 middleware，通过 hook 机制提供了一种更为简便的方式来书写 redux action，它可以直接在函数组件中的 setState 中使用。这就不用再像传统的 redux action 那样，定义一堆 actionCreator、派发 action 和写 reducer 了。
安装
redux-hook-middleware 通过 npm 管理，可以使用以下命令进行安装：
npm install redux-hook-middleware --save
使用
1. 初始化
安装成功后，在 redux createStore 函数中引入该 middleware：
import { createStore, applyMiddleware } from 'redux'
import hookMiddleware from 'redux-hook-middleware'
const store = createStore(
reducer,
applyMiddleware(hookMiddleware)
)2. 定义 action
使用 redux-hook-middleware 定义 action 的方式与传统的 redux action 非常相似，只需要在函数组件中使用 hook 即可：
-- -------------------- ---- -------
------ ----- ---- -------
------ - --------- - ---- -----------------------
-------- -------------- -
----- ------- --------- - -----------
----- --------- - ------------------ - -- -- -
-------------- - --------
--
----- --------- - ------------------ - -- -- -
-------------- - --------
--
------ -
-----
--------- -----------
------- ----------- -- -----------------------
------- ----------- -- -----------------------
------
-
-这里我们定义了两个 action：increment 和 decrement，它们分别会将 count 加上或减去传入的参数。
3. 运行程序
现在我们就可以运行程序并查看效果了。在 Counter 组件中，我们通过按钮来触发 increment 和 decrement 而不用关心 redux 的其他事情，这样就实现了我们的目标。
示例代码
以下是一个完整的示例代码：
-- -------------------- ---- -------
------ ------ - -------- - ---- -------
------ - --------- - ---- -----------------------
------ - ------------ --------------- - ---- -------
------ -------------- ---- -----------------------
----- ------------ - - ------ - -
-------- ------------- - ------------- ------- -
------ ------------- -
--------
------ -----
-
-
----- ----- - ------------
--------
-------------------------------
-
-------- -------------- -
----- ------- --------- - -----------
----- --------- - ------------------ - -- -- -
-------------- - --------
--
----- --------- - ------------------ - -- -- -
-------------- - --------
--
------ -
-----
--------- -----------
------- ----------- -- -----------------------
------- ----------- -- -----------------------
------
-
-
-------- ----- -
------ -
--------- --------------
-------- --
-----------
--
-
------ ------- ----总结
通过使用 redux-hook-middleware，我们可以以一种更简洁的方式编写 redux action，让我们可以更专注于业务代码的编写。当然，在实际项目中使用该库之前，你需要先学习一些基本的 redux 知识，以便更好地理解和使用该库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055e7b81e8991b448dbd66