Галоўная / Артыкулы / Адрасаванне дадзейнаў са RTK Query: Практычны пакальпнік па мутацыях

Redux ToolkitRTK QueryReactJavaScriptState Management

Адрасаванне дадзейнаў са RTK Query: Практычны пакальпнік па мутацыях

Дазвольце даклэ научыцца, як выкарыстоўваць builder.mutation() у RTK Query для адправкі запытак типу POST, керавання станамі заваношчання і адзынакоў, а таксама стварэння функцыональнага компонента формы.

1875 слоў

Введэнне

Раней мы розглядалі, як настроўваць Redux Toolkit Query (RTK Query) і выканаляваць операцыі чытання за дапамою builder.query(). Гэта дазволіла нам запрашваць даны з API і прадставляць іх у аплікацыі на React без неабяжнага стварэння useEffect(), useState() чы аднойчынай логікі запрашэння.

Аднак чытанне дадзеных — це толькі палова прыбліжнасць у работе з API. Большасць аплікацыяў таксама патрабуе спосабоў дадавання, змены чы адчынення записаў на сервере.

Разглянем калькі распашчытных сцэнарыяў:

  • Форма регистрацыі адправляе новыя даны абліковання.
  • Экран заходу адправляе даны абліковання для пераканання.
  • Платформа для блогавання публікуе новыя статты.
  • Інтернет-магазін стварае новыя замовленні.
  • Аплікацыя для задач сахоўвае новададзеныя заведаменні.

Кожна з эых дзеянняў перадае інфармацыю з кліента на сервер, і гэта зазвычай выканаецца через запит HTTP POST.

RTK Query не спрацоўвае запыты POST як запыты — ён спрацоўвае іх як мутацыі.

У гэтым артыкуле показана, як адправляць даныя за дапамою builder.mutation(). Мы разберам кожны фрагмент коду і кожна настройка, ўпэўніваючыся, што вы разумеете не толькі тое, што трэба запісаць, але і чаму кожная частка мае значэнне.

Разумеўце методы HTTP

Перш чым прыступіць да коду, корыстна пераглянуць разныя дзеяння HTTP і для чаго яны выкорыстоўваюцца.

Тыповая REST API адкрывае кілька операцый:

Метод Цэль Прыклад
GET Чытанне даных Зялезьце всіх корыстнікаў
POST Дадаць новыя даны
Стварыць пользователя PUT Заменіць існуючы ресурс Заменіць запис пра пользователя PATCH Зменіць частку ресурса Зменіць імя пользователя DELETE Адчыніць даныя Удаліць пользователя

Этыя інструкцыі сфокусаваны на POST — методзе, які викорыстоўваецца для стварэння новых ресурсаў на серверы.

Чаму POST не викорыстоўвае builder.query()?

Эта прычына часта вызывае плутанне у новачакоў.

Якшо builder.query() можа запрашваць даныя, чаму тая ж функцыя не можа адправіць даныя на сервер?

Прычына крыўціцца тым, для чаго створены кожны з інструментаў.

Запыты

Запыты існуюць для зяўлення інформацыі.

Тыповыя прыклады:

  • З’явіцься пользователяў
  • З’явіцься продуктав
  • З’явіцься замовэнняў
  • З’явіцься паспэўдак

Паколькі тыя ж данні можаць быць запрашаныя параду, запиты автаматычна кэшуюць свае рэзультаты.

Мутацыі

Мутацыі існуюць для модыфікаціі даных.

Тыповыя прыклады:

  • Стварэнне пользователя
  • Апдэйт пользователя
  • Выдаленне пользователя
  • Уваход
  • Рэгістрацыя

Мутацыя сігналізуе серверу, што ў чымусь трэба змяніцца.

Саме гэта разлікаванне ў тым, чаму RTK Query обрабоцвае мутацыі окрема ад запитоў.

Што мы будамы ствараць

Мы створым базовую форму, якая надае новага пользователя серверу.

Цэльвы канцэнтр паадрасу ёсьць:

https://jsonplaceholder.typicode.com/users

А пакет дадзеных, які надаецца ў тэле запиту, будзе выглядаць так:

{
  "name": "John Doe",
  "email": "john@example.com"
}

Структура проекта

src
│
├── app
│   └── store.js
│
├── services
│   └── api.js
│
├── components
│   └── AddUser.jsx
│
├── App.jsx
│
└── main.jsx

Канфігурацыя хранення Redux застаецца такой, як і ранейш. Всё, што нам трэба дадаць, — это канец-пункт мутацыі плюс компонент, які керуе адправленнем формы.

Шаг 1 — Створыць канец-пункт мутацыі

Ачыніце файл службы API:

src/services/api.js

Потым дадаце новая вялічыню канец-пункта ўнутрь об’екта endpoints.

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

export const api = createApi({
  reducerPath: "api",  baseQuery: fetchBaseQuery({
    baseUrl: "https://jsonplaceholder.typicode.com/",
  }),  endpoints: (builder) => ({    addUser: builder.mutation({      query: (newUser) => ({
        url: "users",
        method: "POST",
        body: newUser,
      }),    }),  }),});export const {
  useAddUserMutation,
} = api;

Давайце рассмотрым гэты код лінія за лініяй.

Разумеўце builder.mutation()

addUser: builder.mutation({

Хоча builder.query() прызначаны для запрашэння дадзейна, builder.mutation() викорыстоўваецца тады, калі трэба зменіць якісь элемент на сервере.

Пашырэныя сценарыі ўжывання:

  • Створэнне корыстнікаў
  • Рэгістрацыя абліков
  • Увайшчыце
  • Апдэйт продуктаў
  • Выдаленне пасоў

Калі ваша аплікацыя запішвае чыста зменяе данні на бэкэнде, мутацыя ўсёраследны інструмент для гэтага.

Разумеўце query()

query: (newUser) => ({

Гэтая функцыя прымеўае любыя данні, якія вы перадаеце ёй з коду React.

Напрыклад, якщо вы адправляеце:

addUser({
  name: "John",
  email: "john@example.com",
});

тады параметр пад назвай

newUser

будзе мячыць:

{
  name: "John",
  email: "john@example.com"
}

Гэты об’ект і ўтварае тэла запытку.

Разумеўце URL

url: "users",

Усёлякі чыны, калі базовы URL налаштаваны як:

https://jsonplaceholder.typicode.com/

RTK Query аўтаматычна спаівае іх у:

https://jsonplaceholder.typicode.com/users

так што вам ніколі не трэба самим пісаць полны адрес.

Разумеўце методу

method: "POST",

Гэтыя рэчы ясна працаваюць з RTK Query, каб ён адправіў запытку типу POST. Якщо яго не паказваць, запытка за замовчаннем будзе типу GET.

Разумеўце тэла

body: newUser,

Усё, што зберагаецца ў newUser, перадаецца як пэўнай кантэнт пытання, напрыклад:

{
  "name": "John",
  "email": "john@example.com"
}

Сервер прыме гэты об’ект абсолютна такім, які быў створаны.

Шаг 2 — Экспорт стваранага хука

export const {
  useAddUserMutation,
} = api;

Так сама, як запыткі даўнаюць автаматычна створаны хук, напрыклад

useGetUsersQuery()

мутацыі автаматычна ствараюць свой сабе хук:

useAddUserMutation()

Вы ніколі не пішаце гэты хук вручную — RTK Query стварае яго для вас на адной заснове назвы канцэнтра.

Шаг 3 — Стварэнне компонента React

Створыце новы файл:

src/components/AddUser.jsx

і дадзіце гэты код:

import { useState } from "react";

import { useAddUserMutation } from "../services/api";const AddUser = () => {  const [name, setName] = useState("");
  const [email, setEmail] = useState("");  const [
    addUser,
    {
      isLoading,
      isSuccess,
      error,
    },
  ] = useAddUserMutation();  const handleSubmit = async (e) => {    e.preventDefault();    await addUser({
      name,
      email,
    });    setName("");
    setEmail("");  };  return (
    <form onSubmit={handleSubmit}>      <input
        type="text"
        placeholder="Enter Name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />      <input
        type="email"
        placeholder="Enter Email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />      <button type="submit">
        Add User
      </button>      {isLoading && <p>Saving...</p>}      {isSuccess && <p>User Added Successfully.</p>}      {error && <p>Something went wrong.</p>}    </form>
  );};export default AddUser;

Давайце разберам, што тут відбываецца.

Розумэнне useAddUserMutation()

const [
  addUser,
  {
    isLoading,
    isSuccess,
    error,
  },
] = useAddUserMutation();

У працоўнасці з хукамі мутацый у працоўнасці з хукамі запыткаў вяртаецца маса замест аб’екта. Першы элемент:

addUser

Эта функцыя ўтвараецца для запуску запиту, а другі элемент — это об’ект, які мае корисную інформацыю пра статус таго запиту.

Разумеўце addUser()

await addUser({
  name,
  email,
});

Выкліканне гэтай функцыі запускае запит таким чынам:

POST /users

Запит носіць пакет дадзеных у формате JSON:

{
  "name": "John",
  "email": "john@example.com"
}

У бэкенде гэты пакет дадзеных викорыстоўваецца для стварэння абсалютна новага запису пра корыстніка.

Разумеўце статусаў мутацый

Паралельна з функцыяю-трыгерам, RTK Query даўае вам кальку статусных флагоў, якія описваюць, што ведзеца з запитам.

isLoading

isLoading

Гэты флаг станавіцца true, калі мутацыя ў процесе выканання, таму ён ідзямы для блакавання кнопкі адправкі чыстаць спінер, пакуль не будзе атрымана адпаведнасць.

isSuccess

isSuccess

Калі запит завершыцца без адзінаго бяга, гэта значэнне стане true, чым будзе дацца ясны сігнал для адказвання паведамленнем пра пאўтверджэнне або перанаслання пользователя ў інша месца.

error

error

Якщо сервер адказае пра няверненне, дакладны мэтаданы будуць тут, чым будзе можна паказаць чытальны адказ пра адзінак, а не зламаны інтерфейс.

Шаг 4 — Адрасаванне компонента

Ачніце галоўны файл прыкладнай програмы:

src/App.jsx

і заменіце яго ўместа на следуючы:

import AddUser from "./components/AddUser";

function App() {
  return <AddUser />;
}export default App;

Потым запусціце сервер разработчика:

npm run dev

Запыніце поля формы і нажміце Add User — RTK Query сама адправіць запыт типу POST.

Полны трыбут запыту

Ёсць статыстыка таго, што адбываецца пад капотам, ад выканання формы да абнавлення статаусу:

User Fills Form
        │
        ▼
Clicks Submit
        │
        ▼
addUser()
        │
        ▼
Generated Mutation Hook
        │
        ▼
RTK Query
        │
        ▼
fetchBaseQuery()
        │
        ▼
POST Request
        │
        ▼
Server Response
        │
        ▼
Mutation State Updates
        │
        ▼
React Re-renders

Зверніце увагу на все, чаго няма ў гэтым алгорытме:

  • fetch()
  • axios.post()
  • useEffect()
  • Ручныя запісы стану завантажэння
  • Ручныя запісы стану адзінакоў

RTK Query сама караецца па кожнам з гэтых аспектаў у тылу.

builder.query() проты builder.mutation()

Дужа важна знать, калі выкарыстоўваць кожны з гэтых методаў-білдераў.

builder.query() прызначан для запрашоўкі дадзейнасі, зазвычай праз запиты GET, і ён стварае хукі, такія як useGetUsersQuery(), які запускаюцца аўтаматычна як толькі компонент атрыбутуецца. На протывесу гэтаму, builder.mutation() прызначан для змены дадзейнасі праз методы на кшталт POST, PUT, PATCH або DELETE. Ён стварае хукі, такія як useAddUserMutation(), які запускаюцца толькі тады, калі вы явна вызываеце функцыю-трыгер, а не пад час атрыбутування компонента. Коротка сказаў, запрашоўкі выкорыстовуюцца для чытання, а мутацыі — для стварэння, апдэйта чы скасывання.

Выбір правага інструмента для кожной задачы дапамагае падтрымаць цэнзыяльнасць логіки API і яе зрозумеласць.

Найкращыя практыкі

Памяроцуйце гэтыя рэкамендаціі ўсё час, калі ствараеце функцыянал POST з RTK Query:

  • Вжывайце builder.mutation() кожны раз, калі операцыя меняе дадзейнась на серверы.
  • Зменшыце розмер тэлу прашання, адправляючы толькі тыя палаты, якія насправды трэбуюцься бэкенду.
  • Заўжды вярнавайце увагу на isLoading, isSuccess і error, каб інтэрфейс быў реактыўным і інформатыўным.
  • Выбірайце описовыя назвы канцаўак, такія як addUser, createPost або registerUser.
  • Пераканайце правядомасць таго, што запісаў корыстнік, прытым як перадаеце яго на сервер.
  • Разгляньце варыянт unwrap(), якщо хочаце кераваць успехам і нявыпадкамі за дапамогою блока try...catch у своіх компонентах.

    • Ключовыя выводы

    Пройшоўшы гід, вы вучыліся:

    • Ствараць мутацыю за дапамогою builder.mutation().
    • Падключыць канцаўку POST унутрошчы API slice.
    • Адправляць данні JSON да бэкенд-сервісу.
  • Існавайце аўтагенераваны хук useAddUserMutation().
  • Працюйце з запытамі типу POST працоўна з формай у React.
  • Кантролюйце статусы завантажэння, успеху і адзінакоў без дадатковага коду.
  • Разлічвайце запыты і мутацыі.
  • Застосавуйце стандартныя практыкі для стварэння працоўных вясоў з API.

    • Такі патэрн часта відбываецца ў прыкладных дапраўках — процесы рэгістрацыі корыстнікаў, аутантыфікацыі, публікацыі стацэйк у блогу, артыкулявання замоваў і бесліч іншых сцэнарыяў стварэння дадзеных.

    Што далей?

    Колі вы вже ведаеце, як працаваць з запытамі POST, наступны логічны крок — выучыцца, як аднавляць і вычысцваць існуючыя записы.

    У наступным кансалтатэ ўзьмуцца:

    • Аднавленне записаў за дапамогою запытоў PUT і PATCH.
    • Вычысцванне записаў за дапамогою запыту DELETE.
  • Перадача дынамічных ID у канцэнтры мутацый.
  • Анулювання кэшаваных дадзейнаў, ў результате чаго інтэрфейс автаматычна апцэнтуецца.
  • Іспытак пераказаў — providesTags і invalidatesTags — каб усё заставаць сінхронным без ручнага падтрымання дадзейнаў.

    • Калі вы заканчыце чытанне гіда, вы будете абяжаны для стварэння полныя прыкладаў аплікацый типу CRUD, выкорыстоўваючы патэрны RTK Query, готавыя да прыменення ў рэальных умовах.

    Спаднія матэрыялы

    Усе артыкулыДаслаць брыф