Stwórz interfejs wyszukiwania w React z jasnym rozdzieleniem odpowiedzialności za stan.

Tło wyszukiwania może odnaleźć właściwe dokumenty, a mimo to stworzyć mylące doświadczenie dla użytkownika. Powolna odpowiedź na wcześniejsze zapytanie może przyćmić nowszy wynik. Liczba filtrów może nie być zgodna z treścią listy. Panel źródeł może pokazywać cytaty z poprzedniej odpowiedzi.

Takie problemy często wynikają z niejasnego rozdzielenia odpowiedzialności: kilka elementów stanu reprezentuje tę samą informację, albo efekty wskazują na zdarzenie, które interfejs już obsłużył.

Dla aplikacji opartej na React należy najpierw określić, co oznacza każda wartość oraz jakie operacje mogą ją zmienić.

Rozdziel dane wejściowe od złożonego pytania

Tekst obecny w polu wyszukiwania oraz pytanie powiązane z wyświetlaną odpowiedzią to dwie różne rzeczy. Użytkownik może edytować dane wejściowe podczas czytania poprzedniego wyniku.

Modeluj tę różnicę wyraźnie. Zachowaj wstępny wpis, identyfikator złożonego zapytania lub prośby oraz stan powstałej prośby. Wynik powinien zawierać zapytanie, na które odpowiada.

W przypadku wyszukiwania sterowanego przesłaniem, obsługa przesyłania już wie, że złożono prośbę o wyszukiwanie. Może bezpośrednio wywołać odpowiednią operację. Ustawianie wartości logicznej jedynie po to, aby jakiś efekt mógł ją zauważyć, dodaje kolejną transycję bez ujednolicenia procesu pracy.

Wyszukiwanie na żywo ma inne wymagania: wyniki muszą śledzić zmieniające się zapytanie. Warstwa zapytań lub efekt o określonym czasie trwania może zajmować się tą synchronizacją. Najpierw wybierz zachowanie, a dopiero potem granice implementacji.

Wyprowadzaj wartości, które nie wymagają oddzielnego przechowywania

Jeśli liczba wyników pochodzi z widocznego array, oblicz ją na podstawie tego array. Przechowywanie zarówno array, jak i oddzielnie aktualizowanej liczby powoduje powstanie dwóch wartości, które mogą się różnić.

To samo dotyczy etykiet tworzonych na podstawie bieżącego stanu oraz prostego filtrowania po stronie klienta. Efekt polegający na kopiowaniu jednej wartości React do drugiej jest często oznaką, że druga wartość powinna być zamiast tego wyprowadzana.

To nie oznacza, że cały lokalny stan jest zbędny. Edytowalny projekt może celowo różnić się od danych serwera. Kluczowe jest określenie, kiedy nowa wartość z serwera może zastąpić prace użytkownika.

Nadaj asynchronicznym zadaniom jasnego właściciela

Rozważmy dwa złożone pytania. Prośba A rozpoczyna się pierwsza, prośba B druga, a B kończy się jako pierwsza. Jeśli później A bezwarunkowo zastąpi wynik, na ekranie pojawi się odpowiedź na niewłaściwe pytanie.

Łącz wyniki z identyfikatorami żądań. Tylko aktywne żądanie może zastąpić aktualny wynik. Anuluj przestarzałe operacje, jeśli transport umożliwia anulowanie, a jednocześnie radź sobie z możliwością ukończenia wcześniejszych operacji.

Kwarter warstwa może zapewnić te zachowania, albo dedykowany kontroler żądań może je zaimplementować. Komponent powinien używać wyraźnego stanu, takiego jak „nieaktywny”, „ładuje się”, „sukces” lub „błąd”, zamiast koordynować łańcuch efektów, których zależności przypadkowo uruchamiają kolejny krok.

Prenumeraty, timerzy oraz słuchacze w przeglądarce nadal wymagają czyszczenia podczas cyklu życia. Traktuj efekt jako element związany z procesem synchronizacji zewnętrznej, który ma sens w połączeniu ze swoją konfiguracją i czyszczeniem.

Zachowaj dowody przy odpowiedzi

Zwróć odpowiedź wraz z jej źródłowymi odniesieniami jako jedną odpowiedź powiązaną z złożonym zapytaniem. Gdy zmieni się aktywny wynik, zaktualizuj je razem.

Korzystne źródłowe odniesienie zawiera stabilny identyfikator źródła oraz lokalizację fragmentu tekstu. proces pracy z jakością źródła wyjaśnia, dlaczego sam tytuł jest niewystarczający. Jeśli aplikacja obsługuje przeglądanie dowodów, zachowaj związek pomiędzy każdym wyświetlanym twierdzeniem a fragmentem tekstu dostarczonym w celu jego uzasadnienia.

Rozróżnij pusty wynik od nieodpowiedzianego pytania oraz nieudanej prośby. Wymagają one różnych dalszych kroków od czytelnika, nawet jeśli we wszystkich trzech przypadkach w przeciwnym razie wyświetlona byłaby pusta lista.

Przetestuj interakcję w niewygodnym momencie

Złóż szybko dwa pytania, a pierwszą prośbę wykonaj wolniej. Zmień filtry podczas trwania żądania. Odejdź z interfejsu przed jego zakończeniem. Spróbuj ponownie po wystąpieniu błędu. Sprawdź, czy odpowiedź, etykieta zapytania oraz panel źródłowy pozostają spójne.

Takie przypadki rozszerzają ocenę RAG na sam interfejs. Jakość dowodów ma znaczenie tylko wtedy, gdy użytkownik widzi dowody powiązane z odpowiedzią, o którą faktycznie poprosił.