在本文中，讓我們一起來學習如何將Redux與React Hooks一起使用。
React Redux在2019年6月11日發佈的7.1版中提供了對Hooks的支持。這意味著您可以在函數組件中將Redux與Hooks一起使用，而不是使用高階組件（HOC）。
什麼是Hook？
Hook是在React版本16.8中引入的，可以讓我們訪問函數組件中的狀態和生命週期方法。
讓我們看一個例子。
一個像這樣的React類組件：
<code>class Count extends React.Component {
state = {
count: 0
}
add = () => {
this.setState({ count: this.state.count + 1 })
}
render() {
return (
Count: {this.state.count}
<button>Add/<button>
);
}
}/<code>
可以使用如下Hooks編寫為函數組件：
<code>const Count = () => {
const [count, setCount] = useState(0)
return (
Count: {count}
<button> setCount(count + 1)}>Add/<button>
);
};/<code>
如果您想進一步瞭解Hooks，建議您閱讀有關Hooks的詳細文檔。
回到正題
本文的原始目的是介紹如何將Redux與Hooks結合使用。
React Redux現在提供了useSelector和useDispatch Hook，可以使用它們代替
useSelector是連接mapStateToProps的替代方法。向其傳遞了一個函數，該函數使用Redux的存儲狀態並返回所需的狀態。
useDispatch替換connect的mapDispatchToProps。它所做的只是返回store的dispatch方法，因此我們可以手動調用dispatch。
理論已經夠多了，讓我們看一個實際示例。在該示例中，我們將使用connect的React組件轉換為使用Hooks的組件。
使用connect：
<code>import React from "react";
import { connect } from "react-redux";
import { addCount } from "./store/counter/actions";
export const Count = ({ count, addCount }) => {
return (
<>
<button>Count/<button>
>
);
};
const mapStateToProps = state => ({
count: state.counter.count
});
const mapDispatchToProps = { addCount };
export default connect(mapStateToProps, mapDispatchToProps)(Count);/<code>
現在，使用新的React Redux Hooks代替connect：
<code>import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { addCount } from "./store/counter/actions";
export const Count = () => {
const count = useSelector(state => state.counter.count);
const dispatch = useDispatch();
return (
<>
<button> dispatch(addCount())}>
Count
/<button>
>
);
};/<code>
如您所見，代碼是精簡的，更少的代碼通常意味著更好的性能。它更易於閱讀，易於理解，當然也更易於測試。
不使用高階組件的另一個好處是不再產生多餘的"虛擬DOM包裝"：
現在，我們已經瞭解和學習了Hooks的基礎知識，以及如何將它們與Redux一起使用。編程愉快！