Reduxでの状態構造の変更

私たちのReduxアプリケーションが外部サーバーとやり取りするために実装する最初のステップは、アプリケーション起動時にサーバーに保存されているデータを取得することです。しかしその前に、アプリケーションにいくつかの変更を加えましょう。

商品アプリケーションを開き、その中にあるファイルproductsSlice.jsを開きます。 initialStateの定義に注目してください。当初、商品スライスproductsSliceは、商品データを持つオブジェクト（この場合は2つ）が含まれた配列です。まず、これからサーバーから読み込むため、initialStateからこれらを削除する必要があります。次に、サーバーにAPI リクエストを送信するため、そのステータスを把握することが重要になります。この2点を考慮し、 initialStateを変更しましょう。これは、productsフィールド（最初はデータはなく、空の配列のみ）、status、 errorを持つ単純なオブジェクトとします。これでinitialStateのコードは少し短くなります：

const initialState = {
	products: [],
	status: 'idle',
	error: null,
}

ステータスは'idle'（待機中）と設定しました。最初は何もリクエストを送信しないためです。実際にはこれは変化し、 'loading'（読み込み中）、'succeeded'（成功）、 'failed'（失敗）などの値を取る可能性があります。ステータスを表す名前は、自分にとってわかりやすいものを選択できることを覚えておいてください。

コードを下にスクロールします。initialStateを変更した後、レデューサー関数内でこの状態を扱うコードも変更する必要があります。 productAddedのコードを見てみましょう：

state.push(action.payload)

これから新しい商品は、単純に商品用のstateに追加するのではなく、そのプロパティ state.productsに追加します。したがって、上記の行を以下に置き換えます：

state.products.push(action.payload)

同様に、レデューサーreactionClickedにも同じ変更を加えます。以下の代わりに：

const currentProduct = state.find((product) => product.id === productId)

これからは以下になります：

const currentProduct = state.products.find((product) => product.id === productId)

レデューサーproductUpdatedのコードでも、 stateをstate.productsに自分で置き換えてください。

学生アプリケーションを開いてください。その中のファイルstudentsSlice.jsを開いてください。これからinitialStateが3つのプロパティ： students、status、 errorを持つようにします。レッスンで示したように変更してください。

コードの下方にも適切な変更を加えてください。 3つのレデューサー関数のコード内で、 stateをstate.studentsに置き換えてください。