Αποστολή δεδομένων με χρήση thunk στο Redux

Στο προηγούμενο μάθημα ασχοληθήκαμε με την επεξεργασία POST-request στον ψεύτικο μας διακομιστή. Ας γράψουμε τώρα μια 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) => {}
)

Στον κώδικα αυτού του callback θα καλέσουμε τον client, περνώντας του ως παραμέτρους το μονοπάτι και το αντικείμενο με το προϊόν, και έπειτα θα επιστρέψουμε τα δεδομένα της απάντησης:

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 στο τέλος του αρχείου.