Спіс прадаўцоў у Redux

На мінулых занятках мы скончылі з асноўным матэрыялам. Цяпер з дапамогай thunk мы атрымліваем спіс прадуктаў з сервера і можам захаваць на серверы новы прадукт. Давайце разбярэмся з прадаўцамі. Бо мы атрымліваем даныя і для іх. Давайце зробім асобную староначку са спісам прадаўцоў.

Адкрыем наша прыкладанне з прадуктамі, а ў ім папку sellers. Стварым у гэтай папцы файл SellersList.jsx. Тут мы будзем выкарыстоўваць useSelector, Link і selectAllSellers, код якога мы напішам у sellersSlice.js крыху пазней:

sellers/SellersList.jsximport { useSelector } from 'react-redux'
import { Link } from 'react-router-dom'
import { selectAllSellers } from './sellersSlice'

Далей створым сам SellersList. У ім мы атрымаем усіх прадаўцоў з дапамогай хука useSelector, затым атрымаем верстку для спісу прадаўцоў у цыкле map, прычым кожная назва прадаўца ў нас будзе весці на яго староначку. І ў канцы вернем верстку з загалоўкам і атрыманым спісам:

sellers/SellersList.jsxexport const SellersList = () => {
  const sellers = useSelector(selectAllSellers)
  const sellersToRender = sellers.map((seller) => (
    <li key={seller.id}>
      <Link to={`/sellers/${seller.id}`}>{seller.name}</Link>
    </li>
  ))

  return (
    <div>
      <h2>Sellers:</h2>

      <ul>{sellersToRender}</ul>
    </div>
  )
}

Затым зайдзем у файл sellersSlice.js і па аналогіі з селектарамі ў productsSlice.js створым у самым канцы файла два селектары пасля экспарту рэдьюсера:

sellers/sellersSlice.jsexport const selectAllSellers = (state) => state.sellers

export const selectSellerById = (state, sellerId) =>
state.sellers.find((seller) => seller.id === sellerId)

Цяпер нам неабходна прапісаць маршрут для старонкі са спісам, для гэтага адкрыем файл App.jsx і ў масіў даччыных маршрутаў children дадамо яшчэ адзін аб'ект (не забудзьцеся імпартаваць кампанент SellersList):

App.jsx{
  path: '/sellers',
  element: <SellersList />,
},

Каб нашая спасылка 'Sellers' у меню запрацавала, давайце зайдзем у файл root.jsx (як даўно гэта было ... ) і замянім тэг a на элемент NavLink:

app/root.jsx<NavLink to="/sellers" end>
  Sellers
</NavLink>

І апошняе. Каб у нашай менюшцы вылучалася актыўная спасылка, і было зразумела на якой староначцы мы знаходзімся, мы дадамо стыль у index.css:

index.cssnav a.active {
  color: purple;
}

Запусцім наша прыкладанне. Цяпер мы можам зайсці на староначку з прадаўцамі, клікнуўшы па 'Sellers' у меню. Раней, вядома, трэба клікнуць па 'Products' у меню, інакш нашы прадукты не падгрузяцца. На наступным уроке мы зробім староначку для кожнага прадаўца і на гэтым скончым вывучэнне дадзенага падручніка па Redux.