POST հարցման մշակում, որը ուղարկված է thunk-ի միջոցով Redux-ում

Մենք ձեզ հետ ստացանք ապրանքների և վաճառողների տվյալները սերվերից և արտացոլեցինք դրանք հավելվածում: Սակայն thunk-ի օգնությամբ կարելի է ոչ միայն ստանալ, այլև ուղարկել տվյալներ: Եկեք պարզենք, թե ինչպես դա անել:

Այն բանից հետո, երբ մենք ավելացնում ենք նոր ապրանք, այն մնում է մեր store-ում, այսինքն՝ մեր հավելվածի ներսում: Եկեք անենք, որ նոր ապրանքը պահպանվի սերվերում:

Սկսենք սերվերից: Այստեղ մենք արդեն պետք է մշակենք ոչ թե GET, այլ POST հարցում, քանի որ սերվեր այժմ կուղարկվեն ապրանքի տվյալները, որոնք մենք այնտեղ կպահպանենք:

Բացենք մեր ապրանքներով հավելվածը, և դրա ներսում server.js ֆայլը: Գտնենք դրա մեջ handlers զանգվածը և ավելացնենք դրա մեջ ևս մեկ մշակիչ POST հարցման համար: Այստեղ մենք կընդունենք նաև հարցման մարմինը, հետևաբար callback-ում մենք պետք է փոխանցենք request:

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

Այժմ ձևավոր փակագծերում գրենք կոդ մեր callback-ի: Սկզբից դուրս բերենք տվյալները հարցման և սխալի դեպքում ուղարկենք սերվերից պատասխան, որ մենք չկարողացանք պահպանել տվյալները և 500 status:

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)
})

Եվ այժմ դուք կկարողանաք տեսնել արդյունք յուրաքանչյուր մշակիչի աշխատանքի բրաուզերի կոնսոլում:

Իհարկե, մեր սերվերը իրական չէ, և եթե մենք հարկադրաբար թարմացնենք էջը բրաուզերում, ապա մեր բոլոր նոր օբյեկտները ապրանքներով կանհետանան: