Redux-də State Strukturunun Dəyişdirilməsi

Bizim Redux tətbiqimizin hansısa xarici serverlə qarşılıqlı əlaqəsi üçün həyata keçirəcəyimiz ilk mərhələ - bu, tətbiq işə salındıqda orada saxlanılan məlumatların əldə edilməsidir. Lakin əvvəlcə gəlin tətbiqimizdə bəzi dəyişikliklər edək.

Məhsullarla bağlı tətbiqimizi açaq və onun içindəki productsSlice.js faylını. initialState təyinində diqqət yetirin. Əvvəlcə bizim məhsullar slaysımız productsSlice - bu, içində məhsul məlumatları olan obyektlərin (bizim vəziyyətimizdə onlardan iki ədəd var) olduğu massiv idi. Birincisi, indi biz onları serverdən yükləyəcəyik, ona görə də onları initialState-dən çıxarmalıyıq. İkincisi, biz serverə API sorğuları göndərəcəyik və onların statusu barədə məlumat bizim üçün vacib olacaq. Bu iki şeyi nəzərə alaraq, gəlin initialState-i dəyişək. İndi bu, sadəcə products (əvvəlcə burada heç bir məlumat olmayacaq, sadəcə boş massiv), status və error sahələri olan obyekt olsun. İndi bizim initialState üçün kod bir az daha qısa olacaq:

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

Hələlik biz statusu 'idle' (hərəkətsizlik) təyin etdik, çünki əvvəlcə biz heç bir sorğu göndərmirik, ümumiyyətlə o dəyişəcək və 'loading', 'succeeded', 'failed' dəyərlərini ala bilər. Unutmayın ki, statusu ifadə etmək üçün sizə əlverişli olan adları seçə bilərsiniz.

Kod boyu aşağıya enirik. initialState dəyişikliyindən sonra, biz bu state ilə reducer funksiyalarında işləyən kodu da dəyişməliyik. productAdded üçün koda baxaq:

state.push(action.payload)

İndi yeni məhsulları biz sadəcə məhsullar üçün state-ə yığmayacağıq, əksinə onun state.products xassəsinə yığacığıq. Buna görə də, yuxarıdakı sətri belə dəyişək:

state.products.push(action.payload)

Müvafiq olaraq, reactionClicked reduceri üçün də eyni dəyişiklikləri edək. Bunun əvəzinə:

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

İndi bu olacaq:

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

productUpdated reducerinin kodunda da state-i state.products ilə özünüz əvəz edin.

Tələbələrlə bağlı tətbiqinizi açın. Ondakı studentsSlice.js faylını açın. İndi sizin initialState-iniz üç xassəyə sahib olsun: students, status, error - onu dərsdə göstərildiyi kimi dəyişdirin.

Müvafiq dəyişiklikləri aşağıda kodda da edin. Üç reducer funksiyanızın kodunda state-i state.students ilə əvəz edin.