Actionsを書いてstateの変更を依頼する

<aside> ⚠️ redux-thunkとre-ducksパターンを使いたいので、公式ドキュメントとは異なる書き方で進めます

</aside>

■目次

おさらい

Asctionsの役割

https://www.youtube.com/watch?v=0JKkLZHmWxk&list=PLX8Rsrpnn3IWavNOj3n4Vypzwb3q1RXhr&index=4

payload：（ざっくりいうと）データの塊

なぜAsctionsを使うのか

https://www.youtube.com/watch?v=0JKkLZHmWxk&list=PLX8Rsrpnn3IWavNOj3n4Vypzwb3q1RXhr&index=4

1. Actionsを作る

Actionsの基本の書き方

<aside> 🌿 以下は、「ユーザーがログイン（サインイン）した時に、ストアで管理しているユーザーの情報を変更してね」という依頼を投げるactionの書き方

【重要】 Actionsは、必ずプレーンなobjectだけを返すようにすること！ ****プレーンなobject：return {} 内に記述されたプロパティだけを返すという意味

【ポイント】一つのactionsファイルの中には、複数のactionを記述することができる詳しくはActionsの作成方法の手順2. を参照

</aside>

https://www.youtube.com/watch?v=0JKkLZHmWxk&list=PLX8Rsrpnn3IWavNOj3n4Vypzwb3q1RXhr&index=4

▼上記を写経したもの

export const SIGN_IN = "SIGN_IN"; // このActionがどんなaction typeかをreducersでは認識しておきたい。だからここでexportして、reducersでimportできるようにしている。

export const signInAction = (userState) => { // ユーザーのアクションで呼び出されるようexportしている
		return {
				type: "SIGN_IN", // 冒頭に記述した定数の値と同じものを記述
				payload: {
						isSignedIn: true,
						uid: userState.uid,
						username: userState.username
				}
		}
};

Actionsの作成方法

srcフォルダ内にreducksフォルダを作成し、さらにその中にusersフォルダを作成する

その中にactions.jsを作成する（ファイル階層：src > reducks > users > actions.js）

<aside> 🌿 usersフォルダの名前は、作成するinitialStateのkeyに合わせて適宜フォルダ名を変更してね詳しくはReducersを作ってstateの変更を管理するの「initialStateの基本の書き方」を参照

</aside>

作成したactions.jsに、Actionsのtypeと処理（関数）を記述する

▼記述例

// Action type
export const SIGN_IN = "SIGN_IN"; // このActionがどんなaction typeかをreducersでは認識しておきたい。だからここでexportして、reducersでimportできるようにしている。
// 処理
export const signInAction = (userState) => { // ユーザーのアクションで呼び出されるようexportしている
		return {
				type: "SIGN_IN", // 冒頭に記述した定数の値と同じものを記述
				payload: {
						isSignedIn: true,
						uid: userState.uid,
						username: userState.username
				}
		}
};

// Action type
export const SIGN_OUT = "SIGN_OUT";
// 処理
export const signOutAction = () => { // サインアウト（ログアウト）ではデータを初期値に戻すだけなので、引数はいらない
		return {
				type: "SIGN_OUT",
				payload: {
						isSignedIn: false,
						uid: "",
						username: ""
				}
		}
}

▼テンプレートコピペ用　※マーカー箇所は適宜差し替える場所

export const **TYPE_NAME** = "**TYPE_NAME**";
export const **actionName** = (**適宜仮引数**) => {
		return {
				type: "**TYPE_NAME**",
				payload: {
						**KEY: VALUE OR BOOLEAN,**
						**KEY: VALUE OR BOOLEAN,**
				}
		}
};

完成！