Odświeżenie komponentu

Odświeżenie komponentu
N0
  • Rejestracja:około 7 lat
  • Ostatnio:ponad 2 lata
  • Lokalizacja:Gdańsk
  • Postów:647
0

Mam problem z zaimplementowaniem powiadomień w Reakcie. Po kliknięciu na ikonkę z powiadomieniami otwiera się lista z linkami. Np. jeśli ktoś dodał post, to link będzie wskazywać na stronę z postami. Tylko co zrobić, jeśli użytkownik już jest na stronie z postami? Zrobienie history.push(currentRoute) nie odświeży komponentu. Dodanie parametru do ścieżki też nie. Dodanie stanu przez np. history.push(currentRoute, {date: new Date()}) też nie. window.location.reload() przeładuje całą aplikację. Trick w stylu history.push(tempRoute); setTimeout(() => history.replace(actualRoute)) powoduje słabe UX. Jak na razie w każdym zainteresowanym komponencie przekazuję location.state do useEffect jako ostatni argument. Nawet działa, ale jest to IMO brzydkie rozwiązanie. Macie jakiś pomysł? Użycie Reduxa byłoby pewnie jakimś rozwiązaniem, ale czy nie da się prościej?

edytowany 2x, ostatnio: nobody01
N0
Co na to @neves - zwolennik prostych rozwiązań? :)
neves
próbowałem zrozumieć to co napisałeś, ale poległem, i nie bardzo wiem o co chodzi :>
N0
Mamy jakiś komponent NotificationList, który jest aktualizowany, gdy przyjdą nowe powiadomienia. Teraz jak zaktualizować inne komponenty w aplikacji, których stan mógł ulec zmianie? Użycie linku po prostu nie zawsze działa.
neves
  • Rejestracja:prawie 22 lata
  • Ostatnio:około 12 godzin
  • Lokalizacja:Kraków
  • Postów:1114
1

Cóżżżżż, nie rozumiem kompletnie idei używania routera do rozwiązania tego problemu, ogólnie w Reacie ta nasza komunikacja wygląda w ten sposób:

Parent -> Child - komunikacja za pomocą propsów, prosto i przyjemnie jak przesyłamy tylko dane, gorzej jak Parent potrzebuje wywołać metodę na Child ale też się da to osiągnąć za pomocą render props

Parent <- Child - Parent przekazuje funkcję za pomocą propsa do Childa, Child wywołuje przekazaną funkcję jak chce zmienić coś u rodzica, czyli implementacja wzorca obserwator

jak rozumiem mamy taką sytuację:
c1
| -> c2 -> NotificationList
| -> c3

po zajściu czegoś w NotificationList chcemy uaktualnić c3, no to mamy 3 wyjścia

  1. lift the state up, czyli stan z NL przenosimy do komponentu c1 i i dalej go pchamy zgodnie z jednokierunkowym przepływem za pomocą propsów
  2. przesyłamy funkcję zdefiniowaną w c1 w stylu click(x) => { setState(x) } do propsa OnClick w komponencie NotificationList, który wywołuję ją gdy chce by stan rodzica się zmienił
  3. redux

N0
  • Rejestracja:około 7 lat
  • Ostatnio:ponad 2 lata
  • Lokalizacja:Gdańsk
  • Postów:647
0

No myślałem, że router oferuje jakąś funkcję w stylu refreshPage, którą można by wywołać po przyjściu powiadomienia i tyle. No ale jak widać nie.

Btw, Twoje podejście do Reduxa chyba się nieco zmieniło, o ile pamiętam. Co sądzisz o redux-toolkit: https://github.com/reduxjs/redux-toolkit? :P

neves
  • Rejestracja:prawie 22 lata
  • Ostatnio:około 12 godzin
  • Lokalizacja:Kraków
  • Postów:1114
0

Ciągle uważam że większość stron go nie potrzebuje. Natomiast jak już jest potrzeba to jak najbardziej się sprawdza.
Redux Toolkit nigdy nie używałem, wystarcza mi w zupełności kombinacja: react-redux + redux-thunk, z podpinaniem reduxa za pomocą hooków i wszystko oczywiście w typescripcie


Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.