Публикуйте данные через API с помощью RecoilJS - PullRequest
Новая
       50

Публикуйте данные через API с помощью RecoilJS

1 голос
/ 10 июля 2020

В RecoilJS документах есть пример обработки асинхронных запросов данных, но он касается только получения данных.

Допустим, у меня есть простое состояние: 

const accountState = atom({
  key: "accountState",
  default: {
    id: "",
    name: "",
  }
});

И компонент, который представляет собой регистровую форму: 

const RegisterForm = () => {
  return (
    <form>
      <input type="text" name="username" />
      <button type="submit">Register</button>
    </form>
  )
}

Опубликованные данные находятся в FormData. После успешного создания новой учетной записи сервер отправит ответ, содержащий id и name учетной записи. 

{
  "id": "abcdef123456",
  "name": "example"
}

Эти данные ответа будут установлены как новое состояние accountState.

Как я могу обработать процесс в RecoilJS?

1 Ответ

1 голос
/ 11 июля 2020

Вы можете просто обработать http-запрос и установить ответ на состояние. 

const RegisterForm = () => {
  const [account, setAccount] = useRecoilState(accountState);

  const handleSubmit = async e => {
    e.preventDefault();

    const response = await fetch(url, {
      method: 'POST',
      body: data,
    });

    const responseJson = await response.json();
    setAccount(responseJson);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="username" />
      <button type="submit">Register</button>
    </form>
  );
}

Edit

Чтобы иметь подход с возможностью повторного использования, я предлагаю создавать собственные хуки для частого использования 

const useRegister = () => {
  const setAccount = useSetRecoilState(accountState);

  const register = useCallback(async (username)=> {
    const response = await fetch(url, {
      method: 'POST',
      body: { username },
    });

    const responseJson = await response.json();
    setAccount(responseJson);
  }, [setAccount]);

  return register;

}

const RegisterForm = () => {
  const register = useRegister();

  const handleSubmit = async e => {
    e.preventDefault();

    await register(username);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="username" />
      <button type="submit">Register</button>
    </form>
  );
}
...