Redux 是一个极其流行的 JavaScript 状态管理库，它被广泛应用于前端 React 应用开发中。Redux 的核心思想是维护应用程序状态的可预测性和可管理性，以提高代码的可维护性和可靠性。Redux-hook 是一个基于 Redux 的 Hooks 库，它使得在函数组件中使用 Redux 更加方便和简单。
在这篇文章中，我将深入介绍 npm 包 redux-hook 的使用方法，包括安装、配置、使用 Hooks 解决重复问题等内容，同时配合代码示例以便更好地理解其使用方法和意义。
安装和配置
我们可以通过 npm 快速安装 redux-hook：
npm install --save react-redux redux-hook
安装完成后，我们需要添加 redux-hook 包作为我们的项目依赖，并将它加入我们的 Redux Store 中。
-- -------------------- ---- ------- -- ------------ ------ - ------------ --------------- - ---- -------- ------ - --------- ----------- - ---- ------------- ------ ----- ---- -------------- ------ ----------- ---- ------------- ----- ----- - ------------------------ ------------------------ ----- - --------- ------------ ----------- - - ------------------- ------ ------- ------ ------ - --------- ------------ ----------- --
在上面的代码示例中，我们使用了 Redux 的 createStore 方法来创建一个包含了 thunk 中间件的 Store。接着，我们使用了 Redux Hook 的 useRedux 方法，将我们的 Store 作为参数传递进去。最后我们使用 createHooks 方法创建了包含 three utility Hooks(useStore, useDispatch and useSelector) 的对象，以便在其它组件中使用。
Redux-Hook 的基本使用
redux-hook 主要提供以下三个 Hooks：
useStore
在组件中使用 useStore，我们可以获取到当前 store 对象。通过 useStore Hooks 获取到的 store 对象和通过 Provider 组件提供的 store 对象是一致的，因而无论我们在 React 组件的任何位置使用 useStore，都可以获取到全局唯一的 store 实例，代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- -------------
----- --- - -- -- -
----- ----- - -----------
------ -
-----
--------- ---------- - ------
------
--
--
------ ------- ----useSelector
useSelector Hooks 可以通过传递一个 selector 函数来获取到对应的 State。selector 函数接受当前的 State，返回组件需要使用的 State，即 reducer 函数。 在 useSlector Hooks 中，使用了 React Hooks 中的 useState 和 useEffect 来存储和加载 State。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ----------- - ---- ------------- ----- ------- - -- -- - ----- ----- - ----------------- -- ------------- ------ ------------------- -- ------ ------- --------
useDispatch
这个 Hooks 主要用来进行 dispatch 操作。调用 useDispatch Hooks，我们可以获取到一个函数，用于解析 dispatch 触发器，随后可通过该函数在您的组件中触发 actions，从而更改全局的 store。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- - ---- -------------
------ - --------- - ---- -------------
----- ------------- - -- -- -
----- -------- - --------------
----- ----------- - -- -- -
----------------------
--
------ ------- -----------------------------------------
--
------ ------- --------------Hooks 解决的问题
相比于在类组件中使用 Redux，使用 redux-hook 带来的最大好处是它可以帮助我们避免了许多常见的使用 Redux 时的问题。具体来说，redux-hook 可以帮助您解决以下问题：
- 避免使用
connect函数和mapDispatchToProps方法，并使用 React Hooks 替代它； - 使用
useSelector获取组件需要使用的状态值； - 使用
useDispatch执行 actions； - 可以为从 store 中获取的状态值定义 memoized selectors 以提升性能；
- 可以提供全局的 Store 实例；
- 使得组件从 Store 中获取 State 更加直观、简洁且易于维护。
结论
redux-hook 是一个非常有用的 React Hooks 库，它可以显著简化在函数组件中使用 Redux 的过程，同时也解决了一些使用 Redux 时的常见问题。本文中我们深入介绍了如何在 React App 中使用 redux-hook，包括安装和配置、基本使用和 Hooks 解决的问题等内容。希望这篇文章能够帮助读者更好地理解 redux-hook，并在实际项目开发中得到应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600564c381e8991b448e182b