Адпраўка даных з дапамогай thunk у Redux

На мінулым заняцці мы разабраліся з апрацоўкай POST-запыту на нашым фэйкавым серверы. Давайце цяпер напішам thunk-функцыю, якая будзе адпраўляць запыт на сервер.

Адчынём наша прыкладанне з прадуктамі, а ў ім файл productsSlice.js. Цяпер пасля thunk fetchProducts мы з дапамогай createAsyncThunk створым thunk addProduct:

products/productsSlice.jsexport const addProduct = createAsyncThunk()

Першым параметрам мы перададзім у createAsyncThunk 'products/addProduct', а другім асінхронны callback, які будзе прымаць аб'ект з данымі новага прадукту:

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

У кодзе гэтага колбэка мы выклічам кліента, перадаўшы яму параметрамі шлях і аб'ект з прадуктам, а затым вернем даныя адказу:

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

Цяпер ніжэй у кодзе паглядзім на поле reducers для productsSlice. Раней мы дадавалі новы прадукт з дапамогай рэдьюсера productAdded, у якім у нас былі метады reducer і prepare. Цяпер мы генеруем неабходныя даныя на серверы і працуем з thunk, таму збяром тут цалкам рэдьюсер productAdded з кода. А затым унесем у ў метад extraReducers (у канец яго кода) яшчэ адзін дадатковы рэдьюсер, які ў выпадку паспяховага запыту будзе дадаваць у слайс products новы прадукт прама з payload экшэна (помнім, што такі код магчымы толькі дзякуючы непаўторнаму createSlice):

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

Так, дарэчы, не забудзьце збраць nanoid з радкоў з імпартам, а productAdded з экспарту экшэнаў у канцы файла.