Odświeżenie komponentu

Odpowiedz Nowy wątek
2020-03-26 10:14

Rejestracja: 2 lata temu

Ostatnio: 47 minut temu

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, 2020-03-26 10:22
Co na to @neves - zwolennik prostych rozwiązań? :) - nobody01 2020-03-26 14:46
próbowałem zrozumieć to co napisałeś, ale poległem, i nie bardzo wiem o co chodzi :> - neves 2020-03-26 14:51
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. - nobody01 2020-03-26 14:53

Pozostało 580 znaków

2020-03-26 15:19

Rejestracja: 16 lat temu

Ostatnio: 1 godzina temu

Lokalizacja: Kraków

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


It's easy to hate code you didn't write, without an understanding of the context in which it was written.

Pozostało 580 znaków

2020-03-26 15:24

Rejestracja: 2 lata temu

Ostatnio: 47 minut temu

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

Pozostało 580 znaków

2020-03-26 16:05

Rejestracja: 16 lat temu

Ostatnio: 1 godzina temu

Lokalizacja: Kraków

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


It's easy to hate code you didn't write, without an understanding of the context in which it was written.

Pozostało 580 znaków

Odpowiedz

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0