/
dbataeva
/
tasksApp
Обзор
Документация
Войти
/
dbataeva
/
tasksApp
Код
Запросы
2
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
finalProject
appProject/src/features/formWithAsyncSave/ui/FormWithAsyncSave.tsx
44 строки
1 KB
Daria Bataeva
feat(task9): add ActionStateWithReducer
09 ноя 2025, 19:44
09 ноя 2025, 19:44
6d8e117
Код
Авторство
О чём код?
import React, { useActionState } from 'react'; import styled from './FormWithAsyncSave.module.css'; import { FormStateType } from '../model/FormStateType'; const initialState: FormStateType = { value: '', callsCount: 0, }; export const FormWithAsyncSave = () => { const [state, formAction, isPending] = useActionState< FormStateType, FormData >(async (currentState: FormStateType, formData: FormData) => { const name = formData.get('name'); if (!name) { return { value: '', callsCount: currentState.callsCount }; } await new Promise<void>((resolve) => setTimeout(() => { console.log('sent', { name }); resolve(); }, 1000) ); return { value: '', callsCount: currentState.callsCount + 1 }; }, initialState); return ( <form action={formAction} className={styled.container}> <label htmlFor={'name'}>Введите ваше имя: </label> <input type={'text'} name={'name'} id='name' defaultValue={state.value} /> <button type='submit' disabled={isPending}> Сохранить </button> <span> Status: {isPending ? 'Saving…' : !state.callsCount ? 'idle' : 'Saved!'} </span> </form> ); };