React: Wyświetlanie pojedynczej notatki

16.8.x

0:00Cześć, w tej lekcji zajmiemy się wyświetlaniem odpowiedniej notatki po kliknięciu na kartę,

0:04ponieważ teraz jest tak, że mamy tutaj wbitą na twardo po prostu notatkę i nic

0:08innego nie możemy wyświetlać, więc żeby to zrobić musimy zrobić kilka

0:12rzeczy, które wcale nie będą takie trudne, zaraz ci pokażę, jak możemy ten problem

0:16rozwiązać. Pierwszym miejscem, w którym będziemy szukać jest oczywiście

0:20nasz store, który powinien mieć pobrane wszystkie notatki, którymi dysponujemy,

0:25żeby się do niego dostać będzie musieli wiedzieć na

0:29jakiej ścieżce się znajdujemy, a właściwie chodzi tylko o twitters,

0:34więc żeby wiedzieć jaki typ notatki wyświetla nasza aplikacja musimy wykorzystać tutaj

0:38with context, w które

0:44opleciony sobie nasz detail page. Zrobiłem

0:50to, ponieważ musimy przefiltrować sobie nasz store pod względem notatek, których

0:55potrzebujemy, więc teraz musimy jeszcze połączyć nasz komponent ze store'em,

0:59stworzymy

1:05sobie mapStateToProps i tym

1:12razem oprócz samego state podamy tutaj jeszcze on props, to jest taki

1:16specjalny parametr, który wyciąga nam props'y naszego komponentu

1:20do mapstatetoprops. Będzie nam to potrzebne, ponieważ tutaj korzystamy

1:27z props'a page context. Sprawdźmy

1:31sobie czy  on jest poprawnie przekazywany do naszego komponentu, tak page context

1:38to twitters i teraz żeby nasz mapstatetoprops otrzymał

1:42ten on props, to musimy inaczej niż zawsze opleść w nasze

1:47komponenty, with context musi być tym razem tym Higher Order Component'em, który

1:51jest na wierzchu, a context będzie wrzucony dopiero

1:55do niego do środka. W ten sposób jeśli

2:00sobie wylogujemy on props page

2:04context to dostaniemy w konsoli twitters.

2:10Wynika to z faktu, że to with context

2:15dostarcza tej danej, która jest potrzebna w naszym mapstatetoprops, więc

2:19jeśli with context byłby wewnątrz connect'a, to ten connect już by

2:23nie dostał tych informacji, dlatego teraz zrobiliśmy odwrotnie i on jest

2:27na wierzchu, więc w tym momencie możemy sobie zwrócić z naszego mapstatetoprops

2:31active item, który

2:36będzie dostawał się do state'u poprzez dynamiczny

2:40klucz on props, page context, a następnie

2:45w nim filtrował każdy

2:50item w taki sposób, że porówna sobie item id do

2:55kolejnego props'a który już znasz, czyli do match params

2:59id, okej, dostaliśmy tutaj info, że match is not defind. Sprawdźmy

3:04w takim razie co może być przyczyną tego problemu,

3:09okej,

3:15tutaj. Zapomniałem dodać on props i teraz jeśli

3:20wrzucimy sobie naszego widok twitters i w naszym details page

3:24usuniemy sobie tutaj te props'y bo one tak naprawdę nie były nam do niczego tutaj potrzebne,

3:28one są potrzebne tylko tutaj jako on props, więc w tym momencie możemy

3:32sobie wyciągnąć active item jako props w naszym

3:36komponencie i jeśli

3:41z poziomu naszej listy twitter'ów wejdziemy do notatki,

3:46to ta

3:50notatka dostanie tutaj active item z jednym elementem,

3:54którym jest nasza notatka pobrana z naszego state'u. Różnica

3:59jest tylko taka, że ona jest tablicą z jednym

4:03elementem, więc to co możemy sobie zrobić to stworzyć

4:08return wewnętrz naszej funkcji

4:12komponentu, stworzyć const'a, który wyciągnie

4:16nam item z active

4:21item. W ten sposób destrukturyzujemy tablicę

4:25i teraz jeśli wszystko dobrze poszło, to każdy dummy

4:29artykuł możemy zamienić na item i zarówno title

4:33jak i content i każdą inną rzecz, która tutaj będzie potrzebna,

4:38ten item powinien zawierać. To jest normalne i za chwilkę sobie

4:42do tego przejdziemy. Musimy za każdym razem wchodzić do tej notatki z poziomu widoku

4:46naszych notatek, czyli z tego dashboardu i teraz jak widzisz, notatka

4:51została wyświetlona poprawnie, mamy tutaj Dan'a Abramov'a, jak

4:55wejdziemy sobie tutaj, to wyświetla się Hello Roman, czyli

5:00ten filter tutaj działa poprawnie, wysyła nam odpowiednią notatkę,

5:04porównując id, które mamy w naszym match

5:08params id, czyli tutaj w url'u do id, które

5:13znajduje się w naszym storze. Schody zaczynają się właśnie w momencie kiedy teraz

5:17odświeżamy sobie stronę, w momencie kiedy ktoś wejdzie

5:21do naszej notatki, z poziomu takiego adresu, musimy dodać kolejną

5:25logikę do naszego komponentu, ale tym zajmiemy się już w następnej lekcji.