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