Obsługa żądania POST wysłanego za pomocą thunk w Redux

Otrzymaliśmy dane produktów i sprzedawców z serwera i wyświetliliśmy je w aplikacji. Ale za pomocą thunk można nie tylko otrzymywać, ale także wysyłać dane. Dowiedzmy się, jak to robić.

Po dodaniu nowego produktu, pozostaje on w naszym store, czyli wewnątrz naszej aplikacji. Zróbmy tak, aby nowy produkt zapisywał się na serwerze.

Zacznijmy od serwera. Tutaj będziemy musieli obsłużyć nie GET, a żądanie POST, ponieważ na serwer będą teraz napływać dane produktu, które właśnie tam zapiszemy.

Otwórzmy naszą aplikację z produktami, a w niej plik server.js. Znajdźmy w nim tablicę handlers i dodajmy do niej jeszcze jeden handler dla żądania POST. Tutaj będziemy przyjmować także body żądania, więc w callback musimy przekazać request:

api/server.jshttp.post('/fakeServer/products', async ({ request }) => {})

Teraz w klamrach napiszmy kod naszego callbacka. Na początku wyodrębnijmy dane żądania i w przypadku błędu wyślijmy z serwera odpowiedź, że nie udało się zapisać danych i status 500:

api/server.jshttp.post('/fakeServer/products', async ({ request }) => {
  const data = await request.json()

  if (data.content === 'error') {
    await delay(ARTIFICIAL_DELAY_MS)
    
    return new HttpResponse('server save error', {
      status: 500,
      headers: {
        'Content-Type': 'application/json',
      },
    })
  }
})

Jeśli z danymi wszystko w porządku, to w bazie danych znajdziemy sprzedawcę po id, który do nas przyszedł w żądaniu i wpiszemy tego sprzedawcę w data (dane sprzedawcy przecież u nas też przechowywane są na serwerze ;) ):

api/server.jsconst seller = db.seller.findFirst({
  where: { id: { equals: data.seller } },
})
data.seller = seller

Następnie w bazie danych utwórzmy dla tego produktu obiekt z reakcjami. I teraz, mając wszystkie niezbędne pola dla produktu, utwórzmy w bazie i sam produkt:

api/server.jsdata.reactions = db.reaction.create()
const product = db.product.create(data)

Ustawmy opóźnienie i w ostatniej linii kodu dla naszego callbacka zwróćmy odpowiedź z produktem:

api/server.jsawait delay(ARTIFICIAL_DELAY_MS)
return HttpResponse.json(serializeProduct(product))

Na tym całkowicie zakończyliśmy z serwerem i więcej do niego nie wrócimy.

Nawiasem mówiąc, jeszcze jedna przydatna rzecz. Po linii export const worker = setupWorker(...handlers) możesz dodać następujący kod:

api/server.jsworker.listHandlers().forEach((handler) => {
  console.log(handler.info.header)
})

I teraz będziesz mógł zobaczyć wynik wywołania każdego handlera w konsoli przeglądarki.

Oczywiście nasz serwer nie jest prawdziwy i jeśli będziemy wymuszać odświeżanie strony w przeglądarce, to wszystkie nasze nowe obiekty z produktami znikną.