Javascript - zasady przechowywania i wyszukiwania zmiennych/React

Question

Cześć, mam pewną zagwozdkę. Otóż, w JS zmienne przechowujące wartości o typie referencyjnym w zasadzie nie przechowują owych wartości, a jedynie odnośnik do miejsca w pamięci, w którym się takowe znajdują, za czym idzie, jeśli przypiszemy wartość takiej zmiennej do innej zmiennej, to obie będą się odnosić do tego samego obiektu. Czy wobec tego pisząc w React metodę aktualizującą tablicę w obiekcie state dobrą praktyką jest użycie np. metody filter do faktycznego skopiowania tej tablicy, i pozniejsze przetworzenie jej? W react nie można aktualizować state poza metodą setState(), a według tego, co napisałem powyżej, przypisanie np. const elements = this.state.elements, to to samo co po prostu this.state.elements, więc coś czego nie powinno się robić. Dziękuję wam z góry za odpowiedź.

    state = {
        people: [
            {
                name: "Marcel",
                id: 0
            },
            {
                name: "Igor",
                id: 1,
            },
            {
                name: "Wiktor",
                id: 2,
            },
            {
                name: "Dominik",
                id: 3,
            },
            {
                name: "Bartosz",
                id: 4,
            }],
    }
    handleRemoveElement = (id) => {
        const index = this.state.people.findIndex((element) => element.id === id);
        const elements = this.state.people.filter(() => true);
        elements.splice(index, 1);
        console.log(index);
        this.setState({
            people: elements
        })
    }

 

Answer 1

Na pewno nie jest to dobre rozwiązanie, 1 żądanie powoduje utworzenie za każdym razem nowej tablicy z danymi, a co jak tych danych są tysiące? Co jak żądań jest wiele?
Generalnie takie operacje powinny być wykonywane funkcjami w taki sposób, że usuwając np pewien element z tablicy- z aktualnych danych, usuwasz te dane z bazy tak, w tym wypadku odświeżone danę tablicy zostają pobrane metodą która pobiera je z bazy.
Jedna funkcja nie powinna, usuwać elementu i go modyfikować jednocześnie "funkcje powinny być czyste" a obiekty na których pracujesz immutable- czyli niezmienne.

Odp. nasuwa się sama : State nie powinien zawierać [przechowywać] wraźliwych danych takich jak tablica obiektów na której operujesz

Comments

Dziękuję Ci za cenną radę! Czy mógłbyś przedstawić mi na prostym przykładzie jak to powinno wyglądać w kodzie? Edit: Mam na myśli funkcję pobierającą te dane. Swoją drogą to bardzo ciekawe co piszesz, o wrażliwych danych w state, w kursie który przerabiam zostały zastosowane podobne przykłady, jak ten który umieściłem w kodzie, ale to pewnie dydaktyczne uproszczenie. Czy mogę gdzieś znaleźć jakieś szersze omówienie tego jakie dane powinny(a jakie nie) znajdować się w state?

---

State powinien przechowywać wszystko czego potrzebujesz. Jednak dobrą praktyką jest aby dane były możliwe do serializacji. Czyli unikaj funkcji,  pętli referencji itp.

---

@Wiciorny, To ciekawe co piszesz. Ja od początku nauki reacta uczyłem się, że chcąc zaktualizować state trzeba wykonać jego zmodyfikowaną kopię unikając mutacji. Jak według Ciebie powinno wyglądać przechowywanie danych nie używając stanu czy źle zrozumiałem?
Prosty przykład na szybko naskrobałem i jakbyś zrobił to inaczej, lepiej według zasad i dobrych praktyk. Klasy użyłem, żeby kolega Meksykanin był na bieżąco.

Answer 2

Nie rób tego w taki sposób ten fragment : 

 const index = this.state.people.findIndex((element) => element.id === id);
 const elements = this.state.people.filter(() => true);
 elements.splice(index, 1);

Możesz zapisać po prostu:

 const elements = this.state.people.filter((element) => element.id !== id);

W state możesz zapisywać sobie co tylko chcesz. Ważne żeby pamiętać które metody tworzą kopię, a które nie. 

PS. komponenty klasowe to już nieco historia. Teraz głownie się pisze na funkcyjnych. Zwracam uwagę żebyś zweryfikował datę utworzenia kursu który przerabiasz.