Reduxのコンポーネントでのstoreからのデータ取得

このセッションでは、Reactコンポーネント内に storeからのデータを出力します。

商品管理アプリケーションを開き、フォルダ parts/products に移動して、その中にファイル ProductsList.jsx を作成します。まず最初に、storeからデータを取得するために使用するフック useSelector をインポートします：

import { useSelector } from 'react-redux'

では、storeから商品データを取得しましょう。セレクター関数は個別に作成せず、そのコードを useSelector のパラメーター内に直接記述します：

export const ProductsList = () => {
	const products = useSelector((state) => state.products)
}

次に、関数 ProductsList の本体で、商品取得の行の後に標準的な方法で商品を出力し、 map を使用します：

const dispProducts = products.map((product) => (
	<div key={product.id}>
		<h3>{product.name}</h3>
		<p>{product.desc.substring(0, 100)}</p>
		<p>Price: {product.price}</p>
		<p>Amount: {product.amount}</p>
	</div>
))

そして、以下のマークアップの中で dispProducts を出力します：

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

あとは、私たちの商品リストをメインページに表示するだけです。ファイル root.jsx を開き、見出しを修正します：

<h2>This is my first Redux app!</h2>

次のように変更します：

<h2>My Products App</h2>

次に、ファイルにコンポーネント ProductsList をインポートします：

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

そして、idが main-page のdiv内の閉じ hr タグの直後に挿入します：

<ProductsList />

アプリケーションを起動します。2つの商品からなる私たちのリストがメインページに無事に出力されました。

学生管理アプリケーションを開いてください。フォルダ students 内にファイル StudentsList.jsx を作成します。

レッスンで説明されているように、フック useSelector を使用してstoreから学生データを取得してください。 map を利用して、ステートにある学生に関するすべての情報フィールドを表示してください。

作成したコンポーネント StudentsList を root.jsx にインポートし、メインページに表示してください。学生に関するすべての情報が画面上に表示されていることを確認してください。