Redux Thunk를 사용하여 전송된 POST 요청 처리

우리는 서버로부터 상품과 판매자 데이터를 받아와 애플리케이션에 표시했습니다. 하지만 thunk를 사용하면 데이터를 받아오는 것뿐만 아니라 전송할 수도 있습니다. 어떻게 하는지 알아봅시다.

새 상품을 추가한 후, 그것은 우리의 store, 즉 애플리케이션 내부에 남아 있습니다. 이제 새 상품이 서버에도 저장되도록 만들어 봅시다.

먼저 서버부터 시작하겠습니다. 이제 서버에는 상품 데이터가 전달되어 저장될 것이므로 GET 요청이 아닌 POST 요청을 처리해야 합니다.

상품 애플리케이션을 열고, 그 안의 server.js 파일을 엽니다. 여기서 handlers 배열을 찾아 POST 요청을 위한 또 다른 핸들러를 추가하겠습니다. 여기서는 요청 본문도 받아야 하므로, 콜백에 request를 전달해야 합니다:

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

이제 중괄호 안에 콜백 코드를 작성합니다. 먼저 요청 데이터를 추출하고, 오류가 발생하면 서버에서 데이터를 저장할 수 없었다는 응답과 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',
      },
    })
  }
})

데이터에 문제가 없다면, 데이터베이스에서 요청으로 받은 id로 판매자를 찾아 data에 이 판매자를 기입합니다 (판매자 데이터도 우리 서버에 저장되어 있으니까요 ;) ):

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

다음으로, 이 상품에 대한 반응 객체를 데이터베이스에 생성합니다. 이제 상품에 필요한 모든 필드를 갖추었으니, 데이터베이스에 상품 자체도 생성하겠습니다:

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

지연 시간을 설정하고 콜백 코드의 마지막 줄에서 상품과 함께 응답을 반환합니다:

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

이것으로 서버 작업을 완전히 마쳤으며, 다시 돌아가지 않을 것입니다.

그런데, 또 다른 유용한 정보가 있습니다. export const worker = setupWorker(...handlers) 줄 뒤에 다음 코드를 추가할 수 있습니다:

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

이제 브라우저 콘솔에서 각 핸들러가 실행되는 결과를 볼 수 있습니다.

물론 우리 서버는 실제 서버가 아니므로 브라우저에서 페이지를 강제로 새로 고치면 새로 생성된 모든 상품 객체가 사라질 것입니다.