Redux Thunk를 사용하여 전송된 POST 요청 처리
우리는 서버로부터 상품과 판매자 데이터를 받아와 애플리케이션에 표시했습니다. 하지만 thunk를 사용하면 데이터를 받아오는 것뿐만 아니라 전송할 수도 있습니다. 어떻게 하는지 알아봅시다.
새 상품을 추가한 후, 그것은 우리의 store, 즉 애플리케이션 내부에 남아 있습니다. 이제 새 상품이 서버에도 저장되도록 만들어 봅시다.
먼저 서버부터 시작하겠습니다. 이제 서버에는 상품 데이터가 전달되어 저장될 것이므로 GET 요청이 아닌 POST 요청을 처리해야 합니다.
상품 애플리케이션을 열고, 그 안의 server.js 파일을 엽니다.
여기서 handlers 배열을 찾아 POST 요청을 위한
또 다른 핸들러를 추가하겠습니다. 여기서는 요청 본문도
받아야 하므로, 콜백에 request를 전달해야 합니다:
http.post('/fakeServer/products', async ({ request }) => {})
이제 중괄호 안에 콜백 코드를 작성합니다.
먼저 요청 데이터를 추출하고, 오류가 발생하면
서버에서 데이터를 저장할 수 없었다는 응답과
500 상태를 보냅니다:
http.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에 이 판매자를
기입합니다 (판매자 데이터도 우리 서버에 저장되어 있으니까요 ;) ):
const seller = db.seller.findFirst({
where: { id: { equals: data.seller } },
})
data.seller = seller
다음으로, 이 상품에 대한 반응 객체를 데이터베이스에 생성합니다. 이제 상품에 필요한 모든 필드를 갖추었으니, 데이터베이스에 상품 자체도 생성하겠습니다:
data.reactions = db.reaction.create()
const product = db.product.create(data)
지연 시간을 설정하고 콜백 코드의 마지막 줄에서 상품과 함께 응답을 반환합니다:
await delay(ARTIFICIAL_DELAY_MS)
return HttpResponse.json(serializeProduct(product))
이것으로 서버 작업을 완전히 마쳤으며, 다시 돌아가지 않을 것입니다.
그런데, 또 다른 유용한 정보가 있습니다.
export const worker = setupWorker(...handlers)
줄 뒤에 다음 코드를 추가할 수 있습니다:
worker.listHandlers().forEach((handler) => {
console.log(handler.info.header)
})
이제 브라우저 콘솔에서 각 핸들러가 실행되는 결과를 볼 수 있습니다.
물론 우리 서버는 실제 서버가 아니므로 브라우저에서 페이지를 강제로 새로 고치면 새로 생성된 모든 상품 객체가 사라질 것입니다.
여러분의 학생 애플리케이션을 엽니다.
그 안의 server.js 파일을 엽니다.
handlers 배열에 POST 요청 처리를 추가합니다.
이 요청 본문에서는 새로 추가된 학생의 데이터를 받습니다.
여러분의 http.post에 대한 콜백 본문에서
데이터를 언팩하고, 오류가 발생하면 해당 응답을 보냅니다.
모든 것이 정상이라면, 받은 id를 기반으로 데이터베이스에서
강사를 찾아 데이터에 기입합니다. 또한 데이터베이스를 기반으로
생성된 votes 객체도 데이터에 기입합니다.
수집한 데이터를 바탕으로 새 학생이 포함된
student 객체를 생성하고 서버 응답으로 전송합니다.
