Слање података помоћу thunk у Redux-у

На прошлом часу смо размотрили обраду POST захтева на нашем лажном серверу. Хајде сада да напишемо thunk функцију која ће слати захтев серверу.

Отворимо нашу апликацију са производима, а у њој фајл productsSlice.js. Сада после thunk-a 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 из експорта екшена на крају фајла.