Odosielanie dát pomocou thunk v Reduxe

Na minulej hodine sme preberali spracovanie POST požiadavky na našom falošnom serveri. Poďme teraz napísať thunk funkciu, ktorá bude odosielať požiadavku na server.

Otvorme našu aplikáciu s produktmi a v nej súbor productsSlice.js. Teraz po thunk fetchProducts pomocou createAsyncThunk vytvoríme thunk addProduct:

products/productsSlice.jsexport const addProduct = createAsyncThunk()

Prvým parametrom odovzdáme do createAsyncThunk 'products/addProduct' a druhým asynchrónny callback, ktorý bude prijímať objekt s údajmi nového produktu:

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

V kóde tohto callbacku zavoláme klienta, odovzdáme mu parametre cestu a objekt s produktom a potom vrátime údaje odpovede:

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

Teraz nižšie v kóde sa pozrieme na pole reducers pre productsSlice. Predtým sme pridávali nový produkt pomocou redukora productAdded, v ktorom sme mali metódy reducer a prepare. Teraz generujeme potrebné údaje na serveri a pracujeme s thunk, preto tu úplne odstránime reduktor productAdded z kódu. Potom pridáme do metódy extraReducers (na koniec jej kódu) ešte jeden dodatočný reduktor, ktorý v prípade úspešnej požiadavky pridá do slice products nový produkt priamo z payload akcie (pamätáme, že takýto kód je možný len vďaka jedinečnému createSlice):

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

Áno, mimochodom, nezabudnite odstrániť nanoid z riadkov s importom a productAdded z exportu akcií na konci súboru.