Reduxにおける主要な用語

このレッスンでは、Reduxをさらに学んでいく上で必要な基本的な概念と用語を簡単に説明します。

まずはアクション (action) から始めます。これは、アプリケーションで何が起こったかを記述するイベントです。技術的には通常の JavaScript オブジェクトで、アクションの名前を記入する type フィールドを含みます。

アクションオブジェクトの2番目に重要なフィールドは payload フィールドです。これはアクションのペイロード（有効負荷）を含みます。ペイロードとは、アクションにパラメータとして渡されるデータのことです。

また、このオブジェクトには追加情報を持つ他のフィールドも含まれることがあります。

例として、アクションを作成し、 addOrderAction と名前を付けましょう。これは注文の追加を担当するとします。つまり、 type プロパティには、注文が追加されたこと（orderAdded）を注文リスト（orders）に対して示します。そして payload には、たとえば「壁を塗装する」など、どのような注文なのかを詳しく指定します：

const addOrderAction = {
	type: 'orders/orderAdded',
	payload: 'Paint a wall'
}

アクションオブジェクトを毎回手動で書く代わりに、いわゆる action creator（アクションクリエーター）を使用できます。これは、アクションオブジェクトを作成して返す関数です。これを addOrder と名付けましょう。パラメーターとして、 payload プロパティに必要なテキストを渡します：

const addOrder = text => {
	return {
		type: 'orders/orderAdded',
		payload: text
	}
}

次の重要な概念は、 reducer（リデューサー）です。これは、現在の状態とアクションオブジェクトを受け取り、状態をどのように更新するかを決定し、必要に応じて更新された状態を返す関数です。

次の概念は、ストア (store) です。これは、Reduxアプリケーションの現在のグローバル状態が格納されているオブジェクトです。このオブジェクトには getState メソッドがあり、これを使って現在の状態の値を取得できます。

ストアには dispatch メソッドもあります。これを呼び出してアクションオブジェクトを渡すことが、状態を変更する唯一の方法です。結果として、ストアはリデューサー関数を実行し、新しい状態の値を自身に保存します。

このレッスンで見ていく最後の概念は、セレクターです。セレクターは、ストア内の状態から情報を抽出する方法を知っている特別な関数です。これらの関数は、アプリケーションが肥大化した際に特に有用であり、コードの重複を避けるのに役立ちます。

これらすべての概念とその実践的な適用についての詳細は、このチュートリアルの次のセクションで学びます。