Reduxへのスライスの追加

私たちはReduxアプリケーションを作成するための主要なツールを準備しました。 これで、そのコンポーネントの実装に直接進むことができます。

このレッスンでは、スライス (slices) の概念から始めます。 Reduxアプリケーションは、storeに保存される1つのグローバルステートを持っています。 このステートはスライスに分割されます。事実上、スライスとは、 アプリケーションの特定の部分に関する初期状態、リデューサー、アクションのロジックを含む、 ストレージの小さな部分です。

私たちのアプリケーションには製品が登場するため、 最初に作成するスライスには製品に関する情報が含まれるでしょう。 また、スライスを作成する際には、この情報を処理する方法を知っているリデューサーを追加する必要があります。

srcフォルダーに移動し、 partsフォルダーを作成しましょう。 その中にproductsフォルダーを作成します。 ここには、製品に関連するコードを持つすべてのファイルを入れます。 productsフォルダー内にproductsSlice.jsファイルを作成し、 次にRTKからスライスの作成に使用するcreateSlice関数をインポートします：

parts/products/productsSlice.jsimport { createSlice } from '@reduxjs/toolkit'

では、製品用のスライスを作成し、'products'と名前を付けましょう。 reducersプロパティについては、今は空の中括弧のままにしておきます：

parts/products/productsSlice.jsconst productsSlice = createSlice({
  name: 'products',
  initialState,
  reducers: {}
})

また、initialState、つまりアプリケーションの最初の起動時に読み込まれる ステートスライスの初期状態を定義する必要があります。 インポート直後、スライス作成の前に書きましょう。 いくつかの製品データを含むオブジェクトの配列にします。 各製品にid、タイトル、説明、価格、数量を指定します：

parts/products/productsSlice.jsconst initialState = [
  {
    id: '1',
    title: 'Product1',
    desc: 'This is an amazing product',
    price: '300',
    amount: '30',
  },
  {
    id: '2',
    title: 'Product2',
    desc: 'This is a nice product',
    price: '700',
    amount: '12',
  },
]

ファイルのコードの最後に、createSlice関数の結果から生成されたreducerを取得し、 それをエクスポートします。これはアプリケーションの他のファイルで役立ちます：

parts/products/productsSlice.jsexport default productsSlice.reducer