Reduxでのデータ操作

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

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

import { Outlet } from 'react-router-dom'

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

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

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

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

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

import { NewProductForm } from './NewProductForm'

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

return (
	<div>
		<NewProductForm />
		<div>
			<h2>Products</h2>
			{dispProducts}
		</div>
	</div>
)

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

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

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

import { ProductsList } from './parts/products/ProductsList'

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

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

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

children: [
	{
		path: '/products',
		element: <ProductsList />,
	},
],

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

学生管理アプリケーションを開いてください。ファイルroot.jsxで、StudentsListとNewStudentFormコンポーネントを Outletに置き換えてください。

学生追加フォームが、StudentsList内で表示されるようにしてください。

メインコンポーネントAppに変更を加えてください。ルートルートに子ルートを追加し、パスを'/students'とします。このパスでStudentsListが表示されるようにします。アプリケーションを起動し、すべてが正しく動作することを確認してください。