მონაცემების გაგზავნა thunk-ის საშუალებით Redux-ში

წინა გაკვეთილზე ჩვენ გავეცანით POST-მოთხოვნის დამუშავებას ჩვენს ფეიკ სერვერზე. მოდით ახლა დავწეროთ thunk-ფუნქცია, რომელიც გაგზავნის მოთხოვნას სერვერზე.

გავხსნათ ჩვენი აპლიკაცია პროდუქტებით, ხოლო მასში ფაილი productsSlice.js. ახლა thunk fetchProducts-ის შემდეგ createAsyncThunk-ის საშუალებით შევქმნათ thunk addProduct:

products/productsSlice.jsexport const addProduct = createAsyncThunk()

პირველ პარამეტრად ჩვენ გადავცემთ createAsyncThunk-ს 'products/addProduct', ხოლო მეორედ ასინქრონულ კოლბექს, რომელიც მიიღებს ობიექტს ახალი პროდუქტის მონაცემებით:

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 ექშენების ექსპორტიდან ფაილის ბოლოს.