В этом руководстве + статье мы собираемся пройти через настройку использования машинописного текста с помощью хука Reacts useContext с машинописным текстом.
Индекс:
- Следовать вместе
- Быстрый старт (прокрутите вниз)
Следовать вместе
Мы собираемся создать две кнопки, которые включают или выключают функцию, чтобы продемонстрировать следующее.
- Как использовать TypeScript с useContext
- Как использовать TypeScript с useReducer
- Extra показывает типы с функциями и значениями
Спасибо за чтение, не стесняйтесь аплодировать и оставлять любые отзывы, которые у вас есть.
вступление
Зачем добавлять TypeScript в React? Я считаю, что мы находимся на переломном этапе, когда TypeScript будет воспринят как лесной пожар в следующем году или около того. Поэтому важно понимать, как его использовать и для чего.
Шаг 1. Структура файла (не требуется, если вы используете существующее приложение)
Внутри вашего реактивного приложения можно создать следующее:
- Папки внутри src / с именами «компоненты» и «утилиты»
- Внутри папки компонентов создайте файл с именем «ReducerButtons.tsx».
- Внутри папки утилит создайте файл с именем «AppState.tsx».
Шаг 2: Создайте контекст
Давайте откроем наш файл AppState.tsx и создадим начальный контекст.
Задачи:
- Импортируйте React и ловушку createContext.
- Создайте и экспортируйте наши initialValues
- Создайте и экспортируйте AppContext с помощью нашего хука createContext, принимающего наши initialValues
- Экспортируйте нашего провайдера и дайте ему тип React.FC
- Верните наш контекст и поставщик с дочерним значением, чтобы мы могли обернуть компоненты
Важные примечания:
- returnValue не нуждается в типе, потому что typeScript достаточно умен, чтобы назначить его уже как логическое с нашим присвоением true.
- Единственный другой файл TypeScript, который мы сейчас делаем, - это присвоение AppProvider типа React.FC, который является типом функционального компонента React.
Шаг 3. Добавьте useReducer в AppState.tsx
Давайте добавим некоторые функции, которые мы можем использовать в нашем файле контекста. Мы собираемся создать функцию, которая будет использоваться useReducer для обновления нашего начального значения в зависимости от типа.
Задачи:
- Импортировать useReducer из «реакции»
- Добавьте функции и введите их в наши initialValues
- Создать тип Состояние и действие
- Создайте функцию переключения с именем reducer, которая принимает наши типы, которые мы только что создали для состояния и действия.
- Функция обновления для обновления начального returnValue в зависимости от случая
- Создайте хук useReducer, который принимает (reducer, initialState), в нашем случае мы используем функцию reducer в качестве редуктора, а наше initialState - initialValues
- Обновите возвращаемое нами значение AppContext.Provider, чтобы он возвращал объект нашего initialValue и функции, которые обновят тип на «один» для включения и «два» для выключения.
Важные примечания:
- При добавлении функций в наш код их также нужно набирать. Поскольку наши функции не возвращают ничего, кроме обновления значения типа, предоставляя им тип функции, которая ничего не возвращает, будет работать идеально.
- Тип действия принимает только «один» ИЛИ «два» в качестве значений, все остальное приведет к ошибке.
- Наша функция-редуктор принимает два значения (состояние, действие), которые мы им присваиваем типам, которые мы определили ранее.
Шаг 4: Создание кнопок и добавление useContext
Далее мы собираемся создать две кнопки, которые будут использовать наши функции useContext и useReducer для визуализации простого div с видимым текстом для демонстрации функциональности.
Что нужно сделать:
- Импортировать useContext из реакции
- Импортировать AppContext из AppState
- Создать функциональный компонент
- Создайте константу, значение которой равно useContext, которая принимает AppContext.
- Разрушьте наш контекст, чтобы получить доступ к нашим начальным значениям {returnValue, On, Off}
- Создайте две кнопки HTML с кнопками onClick, которые принимают только что деструктурированные функции On и Off.
- Создайте тернарный &&, который будет отображать текст div в зависимости от его истинности.
Важные примечания:
В этом файле не нужен TypeScript, поскольку все типы заданы в нашем файле контекста.
Шаг 5. Импортируйте контекст и кнопки в App.tsx
Это наш самый простой шаг, нам просто нужно уметь визуализировать то, что мы создали.
Что нужно сделать:
- Импортируйте как наши кнопки, так и наш AppProvider
- Оберните наши ReducerButtons нашим AppProvider
Важные примечания:
Если вы не знакомы с useContext в целом, то, что мы делаем здесь, предоставляет любым компонентам, заключенным в наш поставщик, доступ к созданному контексту.
Рассмотрение
- TypeScript умен, и нам не всегда нужно придавать вещам типы
- TypeScript может помочь предотвратить будущие ошибки
- TypeScript чрезвычайно полезен для всех, кто приходит после того, как вы проверяете свой код.
Готово
Поздравляем, вы ознакомились с руководством! Теперь у вас должны быть две кнопки useReducer и useContext, которые работают с TypeScript!
Быстрый старт
Так ты хочешь код?
Ну вот оно! Нажмите на ссылку github ниже!
Я рада поделиться!
Я действительно прошу, можете ли вы дать мне аплодисменты по статье о среде и отметить репозиторий на github. Это действительно очень помогает мне и дает мне возможность продолжать создавать эти руководства и простые репозитории клонов.
