Handling a POST Request Sent via a Thunk in Redux

We have received product and seller data from the server and output it to the application. But with the help of thunk you can not only receive, but also send data. Let's find out how to do this.

After we add a new product, it remains in our store, that is, inside our application. Let's make it so that the new product is saved on the server.

Let's start with the server. Here we will have to process not a GET request, but a POST request, since the server will now receive product data, which we will save there.

Let's open our product app, and in it the server.js file. Let's find the handlers array in it and add another handler for the POST request to it. Here we will also receive the request body, so we must pass request to the callback:

http.post('/fakeServer/products', async ({ request }) => {})

Now we'll write our callback code in curly brackets. First, we'll extract the request data and, in case of an error, we'll send a response from the server that we couldn't save the data and the status 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',
			},
		})
	}
})

If everything is OK with the data, then we will find the seller in the database by the id that we received in the request and enter this seller in data (after all, the seller's data is also stored on our server ;) ):

const seller = db.seller.findFirst({
	where: { id: { equals: data.seller } },
})
data.seller = seller

Next, we will create an object with reactions for this product in the database. And now, having all the necessary fields for the product, we will create the product itself in the database:

data.reactions = db.reaction.create()
const product = db.product.create(data)

Let's set a delay and in the last line of code for our callback we'll return a response with the product:

await delay(ARTIFICIAL_DELAY_MS)
return HttpResponse.json(serializeProduct(product))

At this point we are completely done with the server and will not return to it again.

By the way, one more useful thing. After the line export const worker = setupWorker(...handlers) you can add the following code:

worker.listHandlers().forEach((handler) => {
	console.log(handler.info.header)
})

And now you will be able to see the result of each handler in the browser console.

Of course, our server is not real and if we force refresh the page in the browser, all our new objects with products will disappear.

Open your application with students. Open the file server.js in it. Add to the array handlers handling the POST request. In the body of this request, you will receive the data of the newly added student.

In the callback body for your http.post, unpack the data and send an appropriate response if there is an error.

If everything is OK, then find the teacher in the database by the received id and enter it into the data. Also enter into the data the object votes created on the basis of the database.

Based on the collected data, create a student object with a new student and send it in the server response.