Wysyłanie danych za pomocą thunk w Redux

Na poprzednich zajęciach zajmowaliśmy się obsługą żądania POST na naszym fałszywym serwerze. Teraz napiszmy funkcję thunk, która będzie wysyłać żądanie do serwera.

Otwórzmy naszą aplikację z produktami, a w niej plik productsSlice.js. Teraz po thunk fetchProducts za pomocą createAsyncThunk utwórzmy thunk addProduct:

products/productsSlice.jsexport const addProduct = createAsyncThunk()

Pierwszym parametrem przekażemy do createAsyncThunk 'products/addProduct', a drugim asynchroniczne wywołanie zwrotne, które będzie przyjmować obiekt z danych nowego produktu:

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

W kodzie tego wywołania zwrotnego wywołamy klienta, przekazując mu parametry ścieżkę i obiekt z produktem, a następnie zwrócimy dane odpowiedzi:

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

Teraz poniżej w kodzie spójrzmy na pole reducers dla productsSlice. Wcześniej dodawaliśmy nowy produkt za pomocą reduktora productAdded, w którym mieliśmy metody reducer i prepare. Teraz generujemy niezbędne dane na serwerze i pracujemy z thunk, więc usuniemy tutaj całkowicie reduktor productAdded z kodu. A następnie dodamy do metody extraReducers (na końcu jego kodu) jeszcze jeden dodatkowy reduktor, który w przypadku udanego żądania będzie dodawał do slice'a products nowy produkt prosto z payload akcji (pamiętajmy, że taki kod jest możliwy dzięki niepowtarzalnemu createSlice):

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

Tak, przy okazji, nie zapomnij usunąć nanoid z linii importu, a productAdded z eksportu akcji na końcu pliku.