В React управление состоянием является важным аспектом создания надежных и интерактивных приложений. Хотя такие хуки, как useQuery, предоставляют механизм обмена состоянием между компонентами, та же функциональность недоступна для useMutation. В этой статье мы рассмотрим различные методы достижения желаемого поведения и разделим статус useMutationмежду разными компонентами.

Метод 1: Контекстный API

Context API — это встроенная функция React, которая позволяет обмениваться состоянием между компонентами без передачи реквизитов вручную. Мы можем создать контекст для хранения статуса useMutationи предоставить его компонентам, которым необходим к нему доступ. Вот пример:

// Create a context for useMutation status
const MutationStatusContext = React.createContext();
// Wrap the relevant components with the context provider
function App() {
  const mutation = useMutation();
  return (
    <MutationStatusContext.Provider value={mutation.status}>
      <ComponentA />
      <ComponentB />
    </MutationStatusContext.Provider>
  );
}
// Access the status in ComponentA
function ComponentA() {
  const status = React.useContext(MutationStatusContext);
  return <div>Status: {status}</div>;
}
// Access the status in ComponentB
function ComponentB() {
  const status = React.useContext(MutationStatusContext);
  return <div>Status: {status}</div>;
}

Метод 2: собственный перехватчик с распространением состояния

Другой подход — создать собственный хук, который инкапсулирует хук useMutationи передает статус компонентам с помощью хука useState. Вот пример:

function useMutationWithStatus() {
  const mutation = useMutation();
  const [status, setStatus] = React.useState(mutation.status);
  React.useEffect(() => {
    setStatus(mutation.status);
  }, [mutation.status]);
  return {
    ...mutation,
    status,
  };
}
// Usage in components
function ComponentA() {
  const mutation = useMutationWithStatus();
  return <div>Status: {mutation.status}</div>;
}
function ComponentB() {
  const mutation = useMutationWithStatus();
  return <div>Status: {mutation.status}</div>;
}

Хотя хук useMutationReact по своей сути не разделяет свой статус между компонентами, как это делает useQuery, мы можем использовать Context API или создать собственный хук для достижения желаемого поведения. Реализуя любой из этих методов, мы можем эффективно обмениваться и синхронизировать статус useMutationмежду различными компонентами наших приложений React.