在開始之前，請確保您已經正確安裝了 Redux 及其相關依賴（如 redux、react-redux 等），並且也已經創建了數據存儲（store）、動作（actions）和規約器（reducers）。react 如何使用 store
1. React 類組件與 Redux#
首先，您需要使用 connect 高階組件將組件連接到 Redux。connect 的兩個主要參數是 mapStateToProps 和 mapDispatchToProps。mapStateToProps 用於從 Redux store 處選擇您需要的 state 片段，並將其映射到組件的屬性。而 mapDispatchToProps 則用於將創建的操作（action creators）與組件屬性相關聯。以下是一個簡單的例子：
// 首先導入依賴：
javascript
import React from 'react';
import { connect } from 'react-redux';
import { sampleActionCreator } from './actions';
// 然後是類組件：
class SampleComponent extends React.Component {
onButtonClick = () => {
this.props.sampleActionCreator();
};
render() {
const { dataFromReduxStore } = this.props;
return (
<div>
<button onClick={this.onButtonClick}>觸發 Redux 動作</button>
<p>來自 Redux 存儲的數據：{dataFromReduxStore}</p>
</div>
);
}
}
// 接下來是連接組件和Redux：
const mapStateToProps = (state) => ({
dataFromReduxStore: state.sampleReducer.data,
});
const mapDispatchToProps = {
sampleActionCreator,
};
export default connect(mapStateToProps, mapDispatchToProps)(SampleComponent);
2. React 函數組件與 Redux#
在函數組件中，可以使用 react-redux 提供的 useSelector 和 useDispatch 鉤子來連接 Redux。
// 首先導入依賴：
javascript
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { sampleActionCreator } from './actions';
// 然後是函數組件：
const SampleComponent = () => {
const dataFromReduxStore = useSelector((state) => state.sampleReducer.data);
const dispatch = useDispatch();
const onButtonClick = () => {
dispatch(sampleActionCreator());
};
return (
<div><button /></div>
觸發 Redux 動作
來自 Redux 存儲的數據：{dataFromReduxStore}
);
};
export default SampleComponent;
以上就是在 React 類組件和函數組件中使用 Redux 的方法。這兩種方法的主要區別在於採用了不同的模式（類組件使用 connect 高階組件和 mapStateToProps/mapDispatchToProps，而函數組件使用 useSelector 和 useDispatch 鉤子函數）來完成 state 選擇和 get action 創建器功能。