Redux-ում state-ի կառուցվածքի փոփոխում

Առաջին փուլը, որը մենք կիրականացնենք մեր Redux հավելվածի արտաքին սերվերի հետ փոխազդեցության համար, դա նրա վրա պահվող տվյալների ստացումն է հավելվածի գործարկման ժամանակ։ Սակայն նախ եկեք մեր հավելվածում մի քանի փոփոխություններ կատարենք։

Բացենք մեր ապրանքների հավելվածը, և դրա մեջ productsSlice.js ֆայլը։ Ուշադրություն դարձրեք initialState-ի սահմանմանը։ Սկզբում մեր ապրանքների սլայսը productsSlice-ը զանգված է, որի մեջ կան օբյեկտներ (մեր դեպքում դրանք երկուսն են) ապրանքների տվյալներով։ Առաջին հերթին, քանի որ այժմ մենք դրանք կբեռնենք սերվերից, ապա պետք է հեռացնել դրանք initialState-ից։ Երկրորդ հերթին, մենք կուղարկենք սերվեր API հարցումներ և մեզ կարևոր կլինի իմանալ դրանց կարգավիճակի մասին։ Հաշվի առնելով այս երկու բաները, եկեք վերափոխենք initialState-ը։ Թող այժմ դա լինի պարզապես օբյեկտ products դաշտով (սկզբում այստեղ ոչ մի տվյալ չի լինի, այլ պարզապես դատարկ զանգված), status-ով և error-ով։ Այժմ մեր կոդը initialState-ի համար կդառնա մի փոքր ավելի կարճ.

products/productsSlice.jsconst initialState = {
  products: [],
  status: 'idle',
  error: null,
}

Մինչև հիմա մենք սահմանել ենք կարգավիճակը 'idle' (անգործություն), քանի որ սկզբնապես մենք ոչ մի հարցում չենք ուղարկում, իսկ ընդհանրապես այն կփոխվի և կարող է ընդունել արժեքներ 'բեռնում', 'կատարված', 'բեռնման սխալ'։ Հիշեք, որ կարգավիճակը նշանակելու համար դուք կարող եք ընտրել այն անունները, որոնք ձեզ հարմար կլինեն։

Իջնենք ավելի ցած կոդով։ initialState-ի փոփոխությունից հետո, մենք պետք է փոխենք նաև այն կոդը, որտեղ մենք աշխատում ենք այս state-ի հետ ռեդյուսեր-ֆունկցիաներում։ Նայենք productAdded-ի կոդին.

products/productsSlice.jsstate.push(action.payload)

Այժմ նոր ապրանքները մենք կդնենք ոչ թե պարզապես state-ի ապրանքների մեջ, այլ նրա հատկության state.products-ի մեջ։ Ուստի, փոխարինենք վերը նշված տողը հետևյալով.

products/productsSlice.jsstate.products.push(action.payload)

Համապատասխանաբար, կկատարենք նույն փոփոխությունները reactionClicked ռեդյուսերի համար։ Փոխարենը.

products/productsSlice.jsconst currentProduct = state.find((product) => product.id === productId)

Այժմ կլինի.

products/productsSlice.jsconst currentProduct = state.products.find((product) => product.id === productId)

Ինքնուրույն փոխարինեք state-ը state.products-ով նաև productUpdated ռեդյուսերի կոդում։