開始する前に、Redux と関連する依存関係（redux、react-redux など）が正しくインストールされていること、そしてストア、アクション、およびリデューサが作成されていることを確認してください。React でのストアの使用方法
1. React クラスコンポーネントと Redux#
まず、コンポーネントを Redux に接続するために connect 高階コンポーネントを使用する必要があります。connect の 2 つの主なパラメータは mapStateToProps と mapDispatchToProps です。mapStateToProps は Redux ストアから必要なステートの断片を選択し、それをコンポーネントのプロパティにマッピングするために使用されます。一方、mapDispatchToProps は作成したアクションクリエータとコンポーネントのプロパティを関連付けるために使用されます。以下は簡単な例です：
// まず依存関係をインポートする：
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 に接続することができます。
// まず依存関係をインポートする：
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 フック関数を使用）を使用してステートの選択とアクションクリエータの取得機能を実現していることです。