Автор оригинала: Jesse Langford.
В моем предыдущем посте я показал простой реактивный крюк, который делает определенный вызов API. На этот раз я хочу показать, как превратить этот специфический крючок в лучшую, более многоразовую версию.
Я собираюсь использовать очень мощную функцию Tymdscript, называемых Generics.
Чтобы начать, давайте посмотрим нашу первую итерацию крюка API.
пример
Этот крючок работает хорошо, но если бы мы хотели сделать подобный вызов API на другую конечную точку, нам придется создать еще один крюк, который повторил бы большую часть того, что у нас есть.
Более универсальная версия этого крючка может понравиться это:
пример
Давайте сравним, что происходит на линии 5 с нашим предыдущим примером
Оригинал:
export default (): [(id: string) => void, User, string] => {
Обновлено:
export default(): [(url: string) => void, string, T?] => {
Во-первых, я заменил удостоверение личности с URL, поэтому мы можем любой необходимый услуг.
Во-вторых, я заменил тип пользователя с помощью Teamecript. Общий вариант позволяет нам вызывать ту же функцию с разными типами. Я переместил переменную ответа до конца, потому что она может быть не определена.
Далее я заменил любую другую ссылку на пользователь с дженерическим ключевым словом
const [response, setResponse] = useState(); const res = await getResource (`${path}/${id}`);
Это гарантирует, что данные, которые я вернутся с API, будет распознан как тип, который я передаю в T, когда я вызываю функцию из моего приложения.
Наконец я добавляю переменную пути к функции GetRosseSetest:
const getResponseTest = async (url: string) => {
try {
const res = await getResource(url);
Теперь мы можем назвать этот крюк в нашем приложении с любым типом и путь, который нам нужен.
пример
Линия 12 USETEST Где мы указываем тип, который мы хотим, чтобы наш универсал стать.
Если бы у нас была другая часть приложения, в котором мы получаем что-то вроде счета, мы можем использовать тот же крюк, просто поменяйте тип, URL и обновите UI.
пример