Տվյալների ուղարկում thunk-ի միջոցով Redux-ում

Նախորդ դասին մենք զբաղվեցինք POST հարցման մշակմամբ մեր կեղծ սերվերում: Եկեք հիմա գրենք thunk-ֆունկցիա, որը կ ուղարկի հարցում սերվերին:

Բացենք մեր ապրանքների հավելվածը, իսկ դրա ներսում productsSlice.js ֆայլը: Հիմա thunk fetchProducts-ից հետո createAsyncThunk-ի օգնությամբ կստեղծենք thunk addProduct:

products/productsSlice.jsexport const addProduct = createAsyncThunk()

Առաջին պարամետրով մենք կփոխանցենք createAsyncThunk-ին 'products/addProduct', իսկ երկրորդով ասինխրոն callback, որը կընդունի օբյեկտ նոր ապրանքի տվյալներով:

products/productsSlice.jsexport const addProduct = createAsyncThunk(
  'products/addProduct',
  async (newProduct) => {}
)

Այս կոլբեքի կոդում մենք կկանչենք կլիենտը, նրան փոխանցելով ուղին և օբյեկտը ապրանքով որպես պարամետրեր, ապա կվերադարձնենք պատասխանի տվյալները:

products/productsSlice.jsexport const addProduct = createAsyncThunk(
  'products/addProduct',
  async (newProduct) => {
    const response = await client.post('/fakeServer/products', newProduct)
    return response.data
  }
)

Հիմա ներքևում կոդում նայենք reducers դաշտին productsSlice-ի համար: Նախկինում մենք ավելացնում էինք նոր ապրանք productAdded ռեդյուսերի օգնությամբ, որի մեջ մենք ունեինք reducer և prepare մեթոդները: Հիմա մենք գեներացնում ենք անհրաժեշտ տվյալները սերվերում և աշխատում ենք thunk-ով, ուստի ամբողջությամբ կհեռացնենք productAdded ռեդյուսերը կոդից: Ապա կավելացնենք extraReducers մեթոդի մեջ (դրա կոդի վերջում) ևս մեկ լրացուցիչ ռեդյուսեր, որը հաջող հարցման դեպքում կավելացնի products սլայսում նոր ապրանքը ուղղակի payload-ից էքշնի (հիշենք, որ նման կոդ հնարավոր է միայն createSlice-ի եզակիության շնորհիվ):

products/productsSlice.js.addCase(addProduct.fulfilled, (state, action) => {
  state.products.push(action.payload)
})

Այո, ի դեպ, մի մոռացեք հեռացնել nanoid-ը իմպորտի տողերից, իսկ productAdded-ը էքշնների էքսպորտից ֆայլի վերջում: