Reduxでのデータ操作

前のセクションでは、Reduxの基本的な動作スキームを実装し、 Reduxアプリケーションの主要な動作原理を学びました。 次のレッスンでは、商品管理アプリケーションの機能を拡充し、 データを操作していきます。

アプリケーションに新しいコンポーネントやルートが追加されるため、 ルーティングに関してひとつ修正を加えましょう。 商品管理アプリケーションを開き、ファイルroot.jsxを開いてください。 このファイルにOutletコンポーネントをインポートし、 その際にProductsListとNewProductFormの インポート行を削除します：

app/root.jsximport { Outlet } from 'react-router-dom'

これで、Rootコンポーネントはルートパス'/'で表示され、 他のすべてのコンポーネントはOutlet内の子ルートで表示されるようになります。 そのために、Rootコンポーネントの#main-pagedivのマークアップを少し修正します：

app/root.jsx<div id="main-page">
  <h2>My Products App</h2>
  <hr></hr>
  <NewProductForm />
  <ProductsList />
</div>

ここで、NewProductFormとProductsListコンポーネントの代わりに Outletを配置します：

app/root.jsx<div id="main-page">
  <h2>My Products App</h2>
  <hr></hr>
  <Outlet />
</div>

商品追加フォームは、これからProductsList内で表示するようにします。 このコンポーネントのファイルを開き、フォームのインポートを追加しましょう：

products/ProductsList.jsximport { NewProductForm } from './NewProductForm'

次に、商品リストの直前にフォームコンポーネントを追加します。 これで、マークアップは以下のようになります：

products/ProductsList.jsxreturn (
  <div>
    <NewProductForm />
    <div>
      <h2>Products</h2>
      {dispProducts}
    </div>
  </div>
)

index.cssの.products-listクラスのスタイルを追加します：

index.css.products-list {
  display: flex;
  flex-direction: column;
}

あとは、メインコンポーネントのAppに変更を加えるだけです。 App.jsxを開き、ProductsListコンポーネントをインポートします：

App.jsximport { ProductsList } from './parts/products/ProductsList'

次に、現時点で唯一のルートであるルートルートに対して、 childrenプロパティを追加します：

App.jsxconst router = createBrowserRouter([
  { path: '/', element: <Root />, children: [] },
])

このプロパティの値として、最初の子ルートを記述します。 パスは'products'に設定します。 これで、このアドレスで商品リストのProductsListが表示されるようになります：

App.jsxchildren: [
  {
    path: '/products',
    element: <ProductsList />,
  },
],

アプリケーションを起動し、問題がないことを確認しましょう。 ルート'/'ではタイトルのみが表示されます。 フォームと商品リストは、アドレス'/products'に隠れています。