Reduxに別のスライスを追加する

前回のレッスンでは、商品用のproductsスライスに熱心に取り組みました。実際のReduxアプリケーションでは、状態（state）にさまざまな目的のための多数のスライスが存在する場合があります。そこで、このレッスンでは、私たちのアプリケーションで実際に商品を追加する販売者（seller）用の別のスライスを状態に追加します。

商品アプリを開き、最初に行うことは、partsフォルダ内にもう一つsellersフォルダを作成することです。ここに販売者に関連するすべてのコードとコンポーネントを配置します。

さて、商品の場合と同様に、販売者用のスライスを作成しましょう。まず、sellersフォルダ内にsellersSlice.jsファイルを作成し、そこにcreateSliceをインポートします。

import { createSlice } from '@reduxjs/toolkit'

標準的な手順を続けます。スライスの初期値として、4人の販売者を作成します。簡略化のため、idとnameの2つのフィールドを持たせます。

const initialState = [
	{ id: '0', name: 'Super Power' },
	{ id: '1', name: 'Miracle Life' },
	{ id: '2', name: 'Dolls&Toys' },
	{ id: '3', name: 'Granny' },
]

続いて、createSliceを使用してsellersスライスを作成し、初期値を渡します。今後、販売者を追加したり、そのデータを更新したりすることはない予定なので、reducersフィールドはとりあえず空のままにしておきましょう。

const sellersSlice = createSlice({
	name: 'sellers',
	initialState,
	reducers: {},
})

ファイルの最後で、生成されたreducerのエクスポートを忘れないようにしましょう。

export default sellersSlice.reducer

次に、appフォルダ内のstore.jsファイルを開き、生成されたreducerをインポートする必要があります。

import sellersReducer from '../parts/sellers/sellersSlice'

そして、configureStore内でsellers用のreducerとして割り当てます。

export default configureStore({
	reducer: {
		products: productsReducer,
		sellers: sellersReducer,
	},
})

受講生用のアプリを開いてください。別のteachersフォルダを作成し、ここに教師に関連するコードファイルを置きます。その中にteachersSlice.jsファイルを作成します。レッスンの資料を参考に、createSliceを使用してteachersスライスを作成してください。

教師データを持つ各オブジェクトには、id、name（例えば'Petrov A.V.'のような姓とイニシャルを含む）、および担当科目（物理、数学、生物学など、思いつくものなら何でも）の3つのプロパティを持たせます。スライスの初期値として、3つの教師オブジェクトを作成してください。

生成されたteachersReducer reducerをstore.jsにインポートし、チュートリアルで示されているようにteachers用のreducerとして割り当ててください。