Списак продаваца у 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-у.