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>Сатушылар:</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 />,
},

Мәзірдегі 'Сатушылар' сілтемесі жұмыс істеуі үшін, root.jsx файлына кірейік (бұл қанша уақыт бұрын болған еді ... ) және a тегін NavLink элементіне ауыстырайық:

app/root.jsx<NavLink to="/sellers" end>
  Сатушылар
</NavLink>

Және соңғысы. Біздің мәзірде белсенді сілтеме бөлініп тұруы үшін, және біз қай бетте екеніміз түсінікті болуы үшін, біз index.css файлына стиль қосамыз:

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

Қолданбамызды іске қосамыз. Енді біз мәзірдегі 'Сатушылар' басып, сатушылар бетіне кізе аламыз. Әрине, алдымен мәзірдегі 'Өнімдер' басу керек, әйтпесе біздің өнімдер жүктелмейді. Келесі сабақта біз әрбір сатушы үшін жеке бет жасаймыз және осы Redux оқулығын оқуды аяқтаймыз.