Duomenų siuntimas naudojant thunk Redux

Ankstesnėje pamokoje mes išnagrinėjome POST užklausos apdorojimą mūsų netikrame serveryje. Dabar parašykime thunk funkciją, kuri siųs užklausą į serverį.

Atidarykime mūsų programą su produktais, o joje failą productsSlice.js. Dabar po thunk fetchProducts mes naudodami createAsyncThunk sukursime thunk addProduct:

products/productsSlice.jsexport const addProduct = createAsyncThunk()

Pirmuoju parametru mes perduosime į createAsyncThunk 'products/addProduct', o antruoju asinchroninį callback, kuris priims objektą su naujo produkto duomenimis:

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

Šio callback kode mes iškviensime klientą, perduodami jam parametrais kelią ir objektą su produktu, o tada grąžinsime atsako duomenis:

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

Dabar žemiau kode pažiūrėkime į lauką reducers productsSlice. Anksčiau mes pridėdavome naują produktą naudodami reducerį productAdded, kuriame mes turėjome metodus reducer ir prepare. Dabar mes generuojame reikiamus duomenis serveryje ir dirbame su thunk, todėl pašalinsime čia visiškai reducerį productAdded iš kodo. Ir tada įtrauksime į metodą extraReducers (į jo kodo pabaigą) dar vieną papildomą reducerį, kuris sėkmės atveju pridės į slice'ą products naują produktą tiesiogiai iš payload action (prisimename, kad toks kodas įmanomas tik dėl nepakartojamo createSlice):

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

Taip, beje, nepamirškite pašalinti nanoid iš importų eilučių, o productAdded iš eksportuojamų action failo pabaigoje.