Modificarea structurii stării în Redux

Prima etapă pe care o vom implementa pentru interacțiunea aplicației noastre Redux cu un server extern este obținerea datelor stocate pe acesta la lansarea aplicației. Dar mai întâi, să aducem câteva modificări în aplicația noastră.

Să deschidem aplicația noastră cu produse, iar în ea fișierul productsSlice.js. Acordați atenție definiției initialState. Inițial, slice-ul nostru cu produse productsSlice este un array în care se află obiecte (în cazul nostru sunt două) cu datele produselor. În primul rând, deoarece acum le vom încărca de pe server, trebuie să le eliminăm din initialState. În al doilea rând, vom trimite către server cereri API și va fi important pentru noi să știm statusul lor. Ținând cont de aceste două aspecte, haideți să refacem initialState. Să fie acum un simplu obiect cu câmpurile products (inițial aici nu vor fi date, ci doar un array gol), status și error. Acum codul nostru pentru initialState va deveni puțin mai scurt:

const initialState = {
	products: [],
	status: 'idle',
	error: null,
}

Deocamdată am setat statusul 'idle' (inactivitate), deoarece inițial nu trimitem nici o cerere, dar în general se va schimba și poate lua valori 'loading', 'succeeded', 'failed'. Amintiți-vă că pentru a desemna statusul puteți alege acele nume care vă vor fi convenabile.

Coborâm mai departe în cod. În urma modificării initialState, trebuie să schimbăm și codul, în care lucrăm cu această stare în funcțiile-reducer. Să ne uităm la codul pentru productAdded:

state.push(action.payload)

Acum noile produse le vom adăuga nu simplu în state pentru produse, ci în proprietatea sa state.products. Prin urmare, înlocuim linia menționată mai sus cu:

state.products.push(action.payload)

În consecință, vom face aceleași modificări pentru reducer-ul reactionClicked. În loc de:

const currentProduct = state.find((product) => product.id === productId)

Acum va fi:

const currentProduct = state.products.find((product) => product.id === productId)

Înlocuiți singuri state cu state.products și în codul reducer-ului productUpdated.

Deschideți aplicația voastră cu studenți. Deschideți în ea fișierul studentsSlice.js. Să aibă acum initialState-ul vostru trei proprietăți: students, status, error - refaceți-l, așa cum este arătat în lecție.

Aduceți modificările corespunzătoare și mai jos în cod. Înlocuiți state cu state.students în codul pentru cele trei funcții-reducer ale voastre.