Redux / ReactJS: Gdzie powinienem przechowywać szczegóły wizualne stanu? - Reakcje, Natywne reakcje, Redukcja, Reakcja-Redukcja

Tworzę kalkulator kosztów podróży. Poinformujesz go, gdzie / jak najprawdopodobniej pojedziesz metrem w tym miesiącu, a to pomoże ci wybrać najlepszą kombinację biletów. Głównym wynikiem do pokazania jest najlepsza opcja + cena.

Chcę, aby była rozszerzalna, aby użytkownikkliknięcie łącznej ceny spowoduje rozwinięcie (z animacją) tabeli wyjaśniającej, z czego jest wykonana cena. Upraszczając trochę, byłoby to mniej więcej tak:

<22 podróży miesięcznie -> skorzystaj z Biletów klasy A, zrobi tokoszt 734 USD> | | użytkownik klika stronę internetową lub stuknie telefon komórkowy | v <22 podróży miesięcznie -> skorzystaj z Biletów klasy A, będzie to kosztować 734 $> - wycieczki 1-10 kosztują 340 USD (34 USD każda) - wycieczki 11-20 kosztują 330 USD (33 USD każda) - wycieczki 21-22 kosztują 64 USD (32 USD każda)

Jakie jest dobre miejsce do przechowywania stanu rozwiniętego / nierozwiniętego?

1. W całym stanie aplikacji, ponieważ nadal jest stanem, podobnie jak wszystko inne, i pomaga, aby komponenty były głupie -> Ułatwia także przenoszenie między Internetem a rodzimym.

   Następnie kliknięcia linii wygenerują działania, zostaną przetworzone przez reduktory i zmodyfikują niektóre expanded klucz w stanie.

2. Wewnątrz komponentów, ponieważ animacja interfejsu użytkownika na niskim poziomie nie ma nic wspólnego z logiką biznesową, a nawet z nawigacją w aplikacji.

   Następnie kliknięcia będą obsługiwane wewnątrz komponentu i będą się owijać / rozpakowywać, np. Ustawiając klasę CSS.

3. Coś innego?

Czego używasz w swoich aplikacjach? Czy istnieje jakiś standardowy wzorzec dla sytuacji takich jak ta?

Odpowiedzi:

Uważam, że twój numer 2 tutaj jest poprawny. Zasadniczo stan odnoszący się do pojedynczego komponentu (otwarty lub zamknięty, indeks tabulatorów, najechanie kursorem, animacje itp.) Powinien być utrzymywany w stanie na poziomie komponentu.

Można użyć następujących ustawień, aby ustawić stan początkowy:

constructor(props) {
super(props);
this.state = {
expanded: false
};
}

Następnie utwórz funkcję onClick, która zwraca this.setState({ expanded: true )};

Tak prawdopodobnie poradziłbym sobie z tym.

Powiedziałbym też, że nr 2, ale mam jedno pytanieten stan logiczny będzie gdzieś przechowywany (pamięć lokalna, ...)? wtedy byłby w stanie globalnym, ponieważ początkowy stan logiczny zostanie ustawiony z tego magazynu