Redux-da maglumat ibermek üçin thunk ulanylyşy

Öňki sapakda biz özümiziň ýasalan serverimizde POST soragyny işlemegi öwrendik. Indi serwere sorag iberýän thunk-funksiýany ýazalyň.

Önümler barada aplikasiýamyzy açalyň, we onuň içindäki productsSlice.js faýlyny açalyň. Indi fetchProducts thunk-yndan soň createAsyncThunk ýardamy bilen addProduct thunk-yňy döredeliň:

products/productsSlice.jsexport const addProduct = createAsyncThunk()

createAsyncThunk-a birinji parametr hökmünde 'products/addProduct' bereliň, ikinji parametr hökmünde bolsa täze önümiň maglumatlar obýektini alýän asinkron callback:

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

Bu callback-iň kodunda klient çağyryp, ona ýol we önüm obýektini parametrler hökmünde bereliň, soňra jogap maglumatlaryny gaýtaryň:

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

Indi aşakdaky koda serediň, productsSlice üçin reducers meýdanyna. Öň biz productAdded reducer-i ýardamy bilen täze önüm goşýardyk, onuň içinde reducer we prepare metodlary bardy. Indi biz zerur maglumatlary serwerde döredýäris we thunk bilen işleýäris, şonuň üçin bu ýerden productAdded reducer-ini koddan doly aýyryň. Soňra extraReducers metoduna (onuň kodunyň soňuna) ýene bir goşmaça reducer goşuň, bu reducer üstünlikli sorag ýagdaýynda products slice-a täze önümi gönümel payload-dan (ýatda saklaň, bu kod diňe createSlice-iň aýratynlygy bilen mümkin):

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

Hawa, ýadyňyzdan çykarmaň, import setirlerinden nanoid-i aýyryň, faýlyň ahyryndaky eksport edilýän aksiýalar listinden bolsa productAdded-y aýyryň.