Reducători în Redux

În lecția precedentă, folosind funcția createSlice am creat un slice pentru produsele products și un reducer care va actualiza acest slice stocat în store. Vă reamintesc încă o dată, că în Redux datele de stare se modifică cu ajutorul reducerilor.

Trebuie să reținem că asupra reducerilor se impune o serie de restricții. Reducerul actualizează starea doar pe baza valorilor primite ale stării curente și a obiectului action, apoi decide cum să modifice starea și returnează noua sa valoare.

Știm că, implicit, obiectele și array-urile în JavaScript sunt mutabile (modificabile). De asemenea, știm că nu putem modifica state-ul direct, în acest caz trebuie să lucrăm doar cu copii. Acestei reguli trebuie să i se supună și reducerul. Dar scrierea manuală a unei astfel de logici poate fi o activitate destul de obositoare și complexă, iar aici vine în ajutor funcția createSlice, care utilizează biblioteca Immer, transformând codul tău 'mutabil' în 'nemutabil'. Astfel, putem păcătui și simplifica viața doar atunci când utilizăm funcțiile createSlice sau createReducer.

Printre restricțiile reducerului se numără și utilizarea logicii asincrone, calculul valorilor aleatorii și executarea altor "efecte secundare". Iar acum, după ce ne-am familiarizat mai bine cu reducerul, să ne întoarcem la aplicația noastră cu produse.

În aplicația noastră există un store pe care l-am creat în lecțiile anterioare, dar deocamdată nu conține nimic. Să deschidem fișierul nostru store.js și să adăugăm puțin cod în el. Pentru început, să importăm în el funcția reducer pentru produse:

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

Acum, ca reducer putem specifica funcția importată productsReducer:

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

Prin linia de mai sus, îi spunem store-ului nostru că de acum înainte, la apariția unui action, toate datele pentru slice-ul state.products vor fi actualizate de către reducerul productsReducer.

Acum puteți porni aplicația (observați că în consolă a dispărut avertismentul despre un reducer nevalid!), să deschideți Redux DevTools în browser și să navigați prin filele acestuia. De exemplu, dând click pe fila State din fila Inspector putem vedea cele două obiecte cu produse ale noastre, care au fost afișate ca valoare inițială a stării la prima lansare a aplicației. În fila Log monitor vedem ce slice-uri conține starea globală - acesta este slice-ul products, care include două obiecte. De asemenea, aruncați o privire și în fila Chart.

Deschideți aplicația voastră cu studenți și modificați codul fișierului store.js, așa cum este arătat în lecție.

Lansați în browser aplicația voastră și navigați prin filele extensiei Redux DevTools.