Duomenų tvarkymas Redux

Ankstesniame skyriuje mes įgyvendinome bazinę Redux veikimo schemą ir dabar žinote pagrindinius Redux aplikacijos veikimo principus. Kituose pamokose pradėsime papildyti mūsų produktų aplikacijos funkcionalumą ir dirbsime su duomenimis.

Kadangi aplikacija bus papildoma naujais komponentais ir maršrutais, padarykime vieną dalyką su maršrutizacija. Atidarykite produktų aplikaciją, tada failą root.jsx. Importuokite jame komponentą Outlet, tuo pačiu ištrinkite eilutes su ProductsList ir NewProductForm importavimu:

app/root.jsximport { Outlet } from 'react-router-dom'

Dabar komponentas Root bus rodomas pagal šakninį kelią '/', o visi kiti komponentai pagal dukterinius Outlet. Tam šiek tiek pakeisime div #main-page komponento Root išdėstymą:

app/root.jsx<div id="main-page">
  <h2>Mano Produktų Aplikacija</h2>
  <hr></hr>
  <NewProductForm />
  <ProductsList />
</div>

Čia mes pastatysime Outlet vietoje komponentų NewProductForm ir ProductsList:

app/root.jsx<div id="main-page">
  <h2>Mano Produktų Aplikacija</h2>
  <hr></hr>
  <Outlet />
</div>

Formą produktų pridėjimui mes dabar rodysime ProductsList. Atidarykime failą su šiuo komponentu ir pridėkime formos importą:

products/ProductsList.jsximport { NewProductForm } from './NewProductForm'

O dabar pridėkime komponentą su forma tiesiai prieš produktų sąrašą. Dabar mūsų išdėstymas atrodys taip:

products/ProductsList.jsxreturn (
  <div>
    <NewProductForm />
    <div>
      <h2>Produktai</h2>
      {dispProducts}
    </div>
  </div>
)

Parašykime stilių klasei products-list index.css:

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

Mums belieka tik atlikti pakeitimus pagrindiniame komponente App. Atidarykime App.jsx ir importuokime į jį komponentą ProductsList:

App.jsximport { ProductsList } from './parts/products/ProductsList'

Tada mūsų vieninteliam kol kas maršrutui, kuris yra šakninis, pridėkime savybę children:

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

Ir nurodykime kaip šios savybės reikšmę pirmąjį dukterinį maršrutą. Kaip kelią nustatykime jam 'products'. Dabar šiuo adresu bus rodomas mūsų produktų sąrašas ProductsList:

App.jsxchildren: [
  {
    path: '/products',
    element: <ProductsList />,
  },
],

Paleiskime mūsų aplikaciją ir įsitikinkime, kad nieko nesugadinome. Šaknyje '/' mes matome tik antraštę. O formelė ir produktų sąrašas pasislėpė adresu '/products'.