Trimiterea datelor folosind thunk în Redux

În lecția precedentă, am analizat procesarea unei cereri POST pe serverul nostru fals. Să scriem acum o funcție thunk care va trimite cererea către server.

Să deschidem aplicația noastră cu produse, iar în ea fișierul productsSlice.js. Acum, după thunk-ul fetchProducts, cu ajutorul createAsyncThunk vom crea thunk-ul addProduct:

products/productsSlice.jsexport const addProduct = createAsyncThunk()

Ca prim parametru, vom transmite către createAsyncThunk 'products/addProduct', iar ca al doilea, un callback asincron care va primi un obiect cu datele noului produs:

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

În codul acestui callback, vom apela clientul, transmițându-i ca parametri calea și obiectul cu produsul, apoi vom returna datele răspunsului:

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

Acum, mai jos în cod, să ne uităm la câmpul reducers pentru productsSlice. Anterior, adăugam un nou produs folosind reducer-ul productAdded, în care aveam metodele reducer și prepare. Acum generăm datele necesare pe server și lucrăm cu thunk, așa că vom elimina complet de aici reducer-ul productAdded din cod. Apoi vom adăuga în metoda extraReducers (la sfârșitul codului său) încă un reducer suplimentar, care în cazul unei cereri de succes va adăuga în slice-ul products noul produs direct din payload acțiunii (ținem minte că un astfel de cod este posibil datorită unicului createSlice):

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

Da, apropo, nu uitați să eliminați nanoid din liniile de import, iar productAdded din exportul acțiunilor la sfârșitul fișierului.