■目次

おさらい

Reducersの役割

https://www.youtube.com/watch?v=2j4c_O2s1uU&list=PLX8Rsrpnn3IWavNOj3n4Vypzwb3q1RXhr&index=5

<aside> 🌿 【ポイント】 ・Reducersは現在のStoreの状態（Storeにあるstateの状態）を知っている ・ReducersはStoreの初期状態も知っておきたい 　→Reduxにおいては、Storeの初期状態を予め用意し、Reducersに教える必要がある

</aside>

1. Storeの初期状態【initialState】を作る

initialStateの基本の書き方

https://www.youtube.com/watch?v=2j4c_O2s1uU&list=PLX8Rsrpnn3IWavNOj3n4Vypzwb3q1RXhr&index=5

<aside> 🌿 【ポイント】 initialStateのkey（下記コード例だとusers やproducts ）に合わせて、ActionsやReducersを格納するフォルダを用意すると管理が楽になる ▼例 src/reducks/users/actions.js, reducers.js src/reducks/products/actions.js

</aside>

▼コード例

// アプリに必要なstateを、initialStateの中にオブジェクト形式でどんどん追加していく
// 必要なstateが出てきたら、都度初期状態をここに追加していこう

const initialState = {
		users: {
				isSignedIn: false,
				uid: "",
				username: ""
		},
		products: {
			〜〜〜
		},
	〜〜〜
}

export default initialState;

initialStateの作り方

1. src > reducks フォルダ内にstoreフォルダを作成し、その中にinitialState.jsを作成する

2. initialState.jsに初期状態のstateをどんどん書いていく

   ▼コード例

   const initialState = {
   		users: {
   				isSignedIn: false,
   				uid: "",
   				username: ""
   		},
   		products: {
   			〜〜〜
   		},
   	〜〜〜
   }
   
   export default initialState; // reducersで呼び出したいので、必ずexportしておく
   

   ▼初期テンプレート コピペ用

   const initialState = {
   		KEY: {
   				KEY: INITIAL_VALUE OR INITIAL_BOOLEAN,
   				KEY: INITIAL_VALUE OR INITIAL_BOOLEAN,
   	},
   }
   
   export default initialState;
   

3. 完成！

2. Reducersを作る

Reducersの基本の書き方

https://www.youtube.com/watch?v=2j4c_O2s1uU&list=PLX8Rsrpnn3IWavNOj3n4Vypzwb3q1RXhr&index=5

<aside> 🌿 【補足】

1. タイプ名や処理など、複数のexportを記述しているはずなので、＊で全てインポート＆

   as ActionsでActions.~で呼び出せるよう設定

</aside>