Redux 是一个用于管理应用程序状态的 JavaScript 库。它可以与任何 JavaScript 应用程序一起工作，但是与 React 结合使用时效果更佳。随着 React 16.8 的发布，Redux 也发布了一组新的 API，称为 Redux Hooks。Redux Hooks 使得编写 Redux 应用程序更加简单和直观。
在本文中，我们将深入探讨 Redux Hooks，包括什么是 Redux Hooks，如何使用它们以及它们在实际应用程序中的用途。
Redux Hooks 是什么？
Redux Hooks 是一组函数，它们使得在函数组件中使用 Redux 更加容易。在以前的版本中，我们需要使用类组件和生命周期方法来连接 Redux Store 和组件。现在，我们可以使用 Redux Hooks 来连接 Store 和函数组件。
Redux Hooks 包括以下函数：
useSelector: 从 Store 中选择状态。useDispatch: 获取 dispatch 函数。useStore: 获取 Store。useAction: 将 action 绑定到组件。
如何使用 Redux Hooks
使用 Redux Hooks 非常简单。首先，我们需要使用 useSelector 函数来选择我们想要从 Store 中获取的状态。例如，如果我们想要获取 Store 中的计数器状态，我们可以这样做：
import { useSelector } from 'react-redux';
function Counter() {
const count = useSelector(state => state.counter);
return <div>{count}</div>;
}在这个示例中，我们使用 useSelector 函数选择了 counter 状态，并将其作为 count 变量返回。
接下来，我们需要使用 useDispatch 函数来获取 dispatch 函数。dispatch 函数用于触发 action 并更新 Store。例如，如果我们想要增加计数器状态的值，我们可以这样做：
import { useDispatch } from 'react-redux';
function Counter() {
const dispatch = useDispatch();
const increment = () => dispatch({ type: 'INCREMENT' });
return <button onClick={increment}>Increment</button>;
}在这个示例中，我们使用 useDispatch 函数获取 dispatch 函数，并将其用于触发 INCREMENT action。
最后，我们可以使用 useAction 函数将 action 绑定到组件。这使得我们可以在组件中轻松地触发 action，而无需在每个组件中都编写 dispatch 函数。例如，如果我们想要绑定一个 increment action，我们可以这样做：
import { useAction } from 'react-redux';
function Counter() {
const increment = useAction('INCREMENT');
return <button onClick={increment}>Increment</button>;
}在这个示例中，我们使用 useAction 函数将 INCREMENT action 绑定到 increment 变量中，并将其用于触发 action。
Redux Hooks 在实际应用程序中的用途
Redux Hooks 在实际应用程序中非常有用。它们使得在函数组件中使用 Redux 更加直观和简单。此外，Redux Hooks 还可以帮助我们编写更少的代码并提高应用程序的性能。
例如，我们可以使用 useSelector 函数选择多个状态，并将它们组合成一个对象。这使得我们可以轻松地将多个状态传递给子组件，而无需在每个子组件中都选择状态。例如：
-- -------------------- ---- -------
------ - ----------- - ---- --------------
-------- -------- -
----- - ------ ---- - - ----------------- -- --
------ --------------
----- ----------------
----
------ -
-----
------ ------------- ----------- --
------
--
-在这个示例中，我们使用 useSelector 函数选择了 counter 和 user.name 状态，并将它们组合成一个对象。然后，我们将这个对象传递给子组件 Child。
总之，Redux Hooks 是一个非常强大的工具，它使得在函数组件中使用 Redux 更加容易和直观。它们可以帮助我们编写更少的代码，并提高应用程序的性能。如果您正在使用 Redux 和 React，那么 Redux Hooks 是您不可或缺的工具之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67da3f41a941bf7134216a70
