Изпращане на данни с помощта на thunk в Redux

В предишния урок се занимавахме с обработката на POST заявка на нашия фалшив сървър. Нека сега напишем thunk функция, която ще изпраща заявка към сървъра.

Нека отворим нашето приложение с продукти, а в него файла productsSlice.js. Сега след thunk fetchProducts ще създадем thunk addProduct с помощта на createAsyncThunk:

products/productsSlice.jsexport const addProduct = createAsyncThunk()

Като първи параметър ще подадем на createAsyncThunk 'products/addProduct', а като втори асинхронен callback, който ще приема обект с данни за нов продукт:

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

В кода на този callback ще извикаме клиента, като му подадем като параметри пътя и обекта с продукта, и след това ще върнем данните от отговора:

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

Сега по-надолу в кода ще разгледаме полето reducers за productsSlice. Преди добавяхме нов продукт с помощта на reducer productAdded, в който имахме методи reducer и prepare. Сега генерираме необходимите данни на сървъра и работим с thunk, така че ще премахнем напълно reducer productAdded от кода. След това ще добавим в метода extraReducers (в края на неговия код) още един допълнителен reducer, който в случай на успешна заявка ще добавя в slice products нов продукт директно от payload на action (помним, че такъв код е възможен само благодарение на неповторимия createSlice):

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

Да, между другото, не забравяйте да премахнете nanoid от редовете с импорти, и productAdded от експорта на actions в края на файла.