Reducery v Reduxu

V minulé lekci jsme pomocí funkce createSlice vytvořili slice pro produkty products a reducer, který bude aktualizovat tento slice uložený v store. Ještě jednou připomínám, že v Reduxu se data stavu mění pomocí reducerů.

Je třeba pamatovat, že na reducery jsou kladena určitá omezení. Reducer aktualizuje stav pouze na základě obdržených hodnot aktuálního stavu a objektu action, a poté rozhodne, jak změnit stav a vrátí jeho novou hodnotu.

Víme, že ve výchozím nastavení jsou objekty a pole v JavaScriptu mutovatelné (změnitelné). Také víme, že nelze měnit state přímo, v takovém případě je třeba pracovat pouze s kopiemi. Tomu musí vyhovovat i reducer. Ale psaní takové logiky ručně může být dost únavné a složité, a zde přichází na pomoc funkce createSlice, která používá knihovnu Immer, přeměňující váš 'mutovatelný' kód na 'nemutovatelný'. Thus, hřešit a zjednodušovat život lze pouze při použití funkcí createSlice nebo createReducer.

Mezi omezení reduceru patří také použití asynchronní logiky, výpočet náhodných hodnot a provádění dalších "vedlejších efektů". A nyní, když jsme se s reducerem blíže seznámili, vrátíme se k naší aplikaci s produkty.

V naší aplikaci je store, který jsme vytvořili v předchozích lekcích, ale zatím v něm nic není. Pojďme otevřít náš soubor store.js a přidat do něj trochu kódu. Pro začátek do něj importujme funkci reduceru pro produkty:

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

Nyní jako reducer můžeme zadat importovanou funkci productsReducer:

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

Výše uvedeným řádkem říkáme našemu store, že nyní při vzniku action budou všechna data pro slice state.products aktualizována reducerem productsReducer.

Nyní můžete spustit aplikaci (všimněte si, že v konzoli zmizelo varování o neplatném reduceru!), otevřít Redux DevTools v prohlížeči a procházet jeho záložkami. Například, stisknutím záložky State v záložce Inspector můžeme vidět naše dva objekty s produkty, které se zobrazily jako počáteční hodnota stavu při prvním spuštění aplikace. Na záložce Log monitor vidíme, jaké slice má globální stav - je to slice products, obsahující dva objekty. Také se podívejte na záložku Chart.

Otevřete vaši aplikaci se studenty a změňte kód souboru store.js, jak je ukázáno v lekci.

Spusťte ve svém prohlížeči vaši aplikaci a procházejte záložky rozšíření Redux DevTools.