Praca z danymi w Redux

W poprzedniej sekcji zaimplementowaliśmy podstawowy schemat działania Redux i teraz znasz główne zasady działania aplikacji Redux. W kolejnych lekcjach zaczniemy uzupełniać funkcjonalność naszej aplikacji z produktami i popracujemy z danymi.

Ponieważ aplikacja będzie obrastać w nowe komponenty i trasy, zróbmy z routingiem jedną rzecz. Otwórz aplikację z produktami, następnie plik root.jsx. Zaimportuj do niego komponent Outlet, przy tym usuń linijki z importem ProductsList i NewProductForm:

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

Teraz komponent Root będzie wyświetlany w ścieżce głównej '/', a wszystkie inne komponenty w potomnych w Outlet. W tym celu nieco poprawmy znacznik diva #main-page dla komponentu Root:

app/root.jsx<div id="main-page">
  <h2>My Products App</h2>
  <hr></hr>
  <NewProductForm />
  <ProductsList />
</div>

Tutaj umieścimy Outlet zamiast komponentów NewProductForm i ProductsList:

app/root.jsx<div id="main-page">
  <h2>My Products App</h2>
  <hr></hr>
  <Outlet />
</div>

Formularz do dodawania produktów będziemy teraz wyświetlać w ProductsList. Otwórzmy plik z tym komponentem i dodajmy import formularza:

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

A teraz dodajmy komponent z formularzem bezpośrednio przed listą produktów. Teraz nasz znacznik będzie wyglądać tak:

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

Dopiszmy styl dla klasy products-list w index.css:

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

Pozostaje nam tylko wprowadzić zmiany w głównym komponencie App. Otwórzmy App.jsx i zaimportujmy do niego komponent ProductsList:

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

Następnie dla naszej na razie jedynej trasy, będącej główną, dodajmy właściwość children:

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

I wpiszmy jako wartość tej właściwości pierwszą trasę potomną. Jako ścieżkę ustawmy mu 'products'. Teraz pod tym adresem będzie wyświetlana nasza lista z produktami ProductsList:

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

Uruchommy naszą aplikację i upewnijmy się, że nic nie zepsuliśmy. W głównym '/' widzimy tylko tytuł. A formularz i lista produktów schowały się pod adresem '/products'.