Adatok küldése thunk használatával a Redux-ban

Az előző órán foglalkoztunk a POST kérés feldolgozásával a hamis szerverünkön. Most írjunk egy thunk függvényt, amely küldi a kérést a szervernek.

Nyissuk meg a termék alkalmazásunkat, és benne a productsSlice.js fájlt. Most a fetchProducts thunk után a createAsyncThunk segítségével hozzunk létre egy addProduct thunk-ot:

products/productsSlice.jsexport const addProduct = createAsyncThunk()

Az első paraméterként a createAsyncThunk-ba átadjuk a 'products/addProduct'-ot, a második pedig egy aszinkron callback lesz, amely átveszi az új termék adatait tartalmazó objektumot:

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

Ennek a kolbéknak a kódjában meghívjuk a klienset, átadva neki az útvonalat és a terméket tartalmazó objektumot paraméterként, majd visszaadjuk a válasz adatait:

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

Most lentebb a kódban nézzük a reducers mezőt a productsSlice-hoz. Korábban a productAdded reducer segítségével adtunk hozzá új terméket, amelyben voltak reducer és prepare metódusaink. Most mi generáljuk a szükséges adatokat a szerveren és thunk-kal dolgozunk, ezért innen teljesen eltávolítjuk a productAdded reducert a kódból. Majd bevisszük a extraReducers metódusba (a kódja végére) még egy kiegészítő reducert, amely sikeres kérés esetén hozzáadja a slice-hoz az új terméket közvetlenül az akció payload-jából (emlékezzünk, hogy egy ilyen kód csak a egyedülálló createSlicenak köszönhetően lehetséges):

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

Igen, egyébként, ne felejtsétek el a nanoid eltávolítását az import sorokból, és a productAdded-t az exportból az eksztenek végén a fájl végén.