Redukcery w Redux

Na poprzedniej lekcji za pomocą funkcji createSlice utworzyliśmy wycinek dla produktów products oraz reduktor, który będzie aktualizował ten wycinek przechowywany w store. Jeszcze raz przypominam, że w Redux dane stanu są zmieniane za pomocą reduktorów.

Należy pamiętać, że na reduktory nakładane są pewne ograniczenia. Reduktor aktualizuje stan tylko na podstawie otrzymanych wartości bieżącego stanu i obiektu action, a następnie decyduje, jak zmienić stan i zwraca jego nową wartość.

Wiemy, że domyślnie obiekty i tablice w JavaScript są mutowalne (zmienne). Również wiemy, że nie można bezpośrednio zmieniać state, w takim przypadku należy pracować tylko z kopiami. Tej zasadzie musi podlegać także reduktor. Ale pisanie takiej logiki ręcznie może być dość uciążliwe i skomplikowane, i tutaj z pomocą przychodzi funkcja createSlice, która używa biblioteki Immer, przekształcającej twój 'mutowalny' kod w 'niemutowalny'. W ten sposób, grzeszyć i upraszczać życie można tylko przy użyciu funkcji createSlice lub createReducer.

W liczbie ograniczeń reduktora znajduje się również użycie logiki asynchronicznej, obliczanie losowych wartości i wykonywanie innych "efektów ubocznych". A teraz, zapoznawszy się z reduktorem bliżej, wróćmy do naszej aplikacji z produktami.

W naszej aplikacji jest store, który utworzyliśmy na poprzednich lekcjach, ale na razie nie ma w nim nic. Otwórzmy nasz plik store.js i dodajmy do niego trochę kodu. Na początek zaimportujmy do niego funkcję reducer dla produktów:

import productsReducer from '../parts/products/productsSlice'

Teraz jako reduktor możemy określić zaimportowaną funkcję productsReducer:

export default configureStore({
	reducer: {
		products: productsReducer
	}
})

Powyższą linijką mówimy naszemu store, że teraz przy powstaniu action wszystkie dane dla wycinka state.products będą aktualizowane przez reduktor productsReducer.

Teraz możesz uruchomić aplikację (zauważ, że w konsoli zniknęło ostrzeżenie o nieprawidłowym reduktorze!), otworzyć Redux DevTools w przeglądarce i pooglądać jego zakładki. Na przykład, klikając na zakładkę State w zakładce Inspector możemy zobaczyć nasze dwa obiekty z produktami, które wyświetliły się jako początkowa wartość stanu przy pierwszym uruchomieniu aplikacji. Na zakładce Log monitor widzimy jakie wycinki ma w sobie globalny stan - to wycinek products, zawierający dwa obiekty. Zajrzyj też na zakładkę Chart.

Otwórz twoją aplikację ze studentami i zmień kod pliku store.js, jak pokazano w lekcji.

Uruchom w przeglądarce twoją aplikację i pooglądaj zakładki rozszerzenia Redux DevTools.