Slanje podataka pomoću thunk-a u Redux-u

Na prošlom času smo razgovarali o obradi POST zahteva na našem lažnom serveru. Hajde sada da napišemo thunk-funkciju koja će slati zahtev serveru.

Otvorimo našu aplikaciju sa proizvodima, a u niej datoteku productsSlice.js. Sada posle thunk-a fetchProducts ćemo uz pomoć createAsyncThunk kreirati thunk addProduct:

products/productsSlice.jsexport const addProduct = createAsyncThunk()

Kao prvi parametar ćemo proslediti u createAsyncThunk 'products/addProduct', a kao drugi asinhroni callback, koji će prihvatati objekat sa podacima novog proizvoda:

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

U kodu ovog callback-a pozvaćemo klijenta, prosledivši mu kao parametre putanju i objekat sa proizvodom, a zatim vratiti podatke odgovora:

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

Sada ispod u kodu pogledajmo polje reducers za productsSlice. Ranije smo dodavali novi proizvod pomoću reducer-a productAdded, u kojem smo imali metode reducer i prepare. Sada mi generišemo potrebne podatke na serveru i radimo sa thunk-om, zato ćemo ovde u potpunosti ukloniti reducer productAdded iz koda. A zatim uneti u metod extraReducers (na kraj njegovog koda) još jedan dodatni reducer, koji u slučaju uspešnog zahteva dodaje u slice products novi proizvod direktno iz payload akcije (sećamo se, da je ovakav kod moguć samo zahvaljujući jedinstvenom createSlice):

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

Da, usput, ne zaboravite da uklonite nanoid iz linija sa import-om, a productAdded iz eksporta akcija na kraju datoteke.