Spread syntax, obiekt, tablica haszująca

Question

Cześć, w jednym z moich projektów użyłem tablicy haszującej, a dokładniej obiektu który ma dwa klucze: byId  przechowujący tablicę oraz klucz byHash przechowujący obiekty. Aby zobrazować to bardziej na przykładzie, to podaję przykładowy zestaw danych takiego obiektu. 

state = {
  byId: [0, 1, 2],
  byHash: {
    0: {
      id: 0,
      content: { nameProduct: "chleb", categoryProduct: "pieczywo" }
    },
    1: {
      id: 1,
      content: { nameProduct: "czekolada", categoryProduct: "słodycze" }
    },
    2: {
      id: 2,
      content: { nameProduct: "piwo", categoryProduct: "alkohol" }
    }
  }
};

No i robiłem reducer, który zajmował mi się usuwaniem jednego z produktów (id usuwanego produktu dostaję w argumencie funkcji i nazywa się tutaj: action.id). O ile usunięcie jednej z wartości z kluczy byHash wydawało się w miarę proste (przeleciałem cały klucz metodą filter z warunkiem jednoID !== drugiegoID) tak usunięcie klucza byHash był malutkim wyzwaniem. Co prawda sobie poradziłem i odnalazłem rozwiązanie w internecie, ale postanowiłem do tego wrócić i zrozumieć to do końca. Rozwiązałem to w ten sposób: 

 const { [action.id]: deletedValue, ...newState } = state.byHash;
 console.log(newState); 

 konsoluje mi nową wartość klucza byHash, ofc bez tej usuniętej wartości. Czyli jak usunąłem czekoladę, to wykonsoluje mi: 

0:
content : {nameProduct: "chleb", categoryProduct: "pieczywo"}
id: 0
2: 
content: {nameProduct: "piwo", categoryProduct: "alkohol"}
id: 2

No i fajnie, że działa, ale jednak chciałbym się dowiedzieć dlaczego i co się dzieje tutaj :)  :

const { [action.id]: deletedValue, ...newState } = state.byHash;

Dodam tylko, że nie chcę sobie mutować stanu, więc nie chcę korzystać z delete.

Answer 1

Dodam tylko, że nie chcę sobie mutować stanu, więc nie chcę korzystać z delete.

A to przyniesie Ci jakąś wymierną korzyść przy tej aplikacji czy po prostu nie chcesz i już? Bo będąc JS devem starej szkoły nie jestem wyznawcą kościoła niemutowalności jakoś szczególnie :P

Natomiast co do kodu:

const { // 1
    [action.id]: deletedValue, // 2
    ...newState // 3
} = state.byHash;

Stosujemy tutaj destructuring (1). Do zmiennej deletedValue zapisujemy własność obiektu state.byHash, która znajduje się pod kluczem równym action.id (2). Nazwa tej własności jest w nawiasie kwadratowym, gdyż jest to tzw. computed property. Następnie przy pomocy operatora spread zapisujemy obiekt z pozostałymi kluczami do zmiennej newState (3).

Comments

Używam Reacta, który działa w ten sposób, że obserwuje zmiany stanu i na zmianę stanu się uaktywnia silnik renderujący. Przy zmianie stanu wewnętrznego może dojść dojść do desynchronizacji DOM I Virtual DOM. W moim przypadku dochodzi do tego jeszcze Redux, ale tak naprawdę działa on na tej samej zasadzie. Dlatego lepiej unikać mutowalności. Po co sobie generować problemy. :)

Dzięki wielkie za wytłumaczenie. :)