ЯсноПонятно24

Мы реализовали достаточно простой слайс для работы с пользователем, который содержит несколько полей: Состояние инита: был ли запущен хоть какой-то процесс получения пользовательской информации. Состояние загрузки: используется, чтобы понять, что сейчас мы получаем token или пользователя. Пользователь. Ошибка. Сейчас пользователь может полностью пройти процесс заполнения страницы, но после её перезагрузки вся информация сразу пропадет, и пароль придется вводить повторно. Чтобы этого избежать, необходимо сохранять токен в localStorage в ключ token на странице SignIn в момент, когда мы получили токен. Также в приложении (/app/index.ts) необходимо добавить проверку. Если токен есть в localStorage, нужно запросить пользователя. Если его нет, необходимо отправить экшен init, чтобы приложение поняло, что пользователь проинициализирован и его просто нет (это нам потребуется в будущем). Чтобы получить пользователя сразу же при старте приложения, используйте useEffect в /app/index.tsx. import React, {useState} from 'react'; import {useDispatch, useSelector} from 'react-redux'; import {useNavigate} from 'react-router-dom'; import {AppDispatch, RootState} from '../../store'; import {loginUserThunk, getUserThunk} from '../../features/user/userSlice'; export const SignIn = () => { const dispatch: AppDispatch = useDispatch(); const navigate = useNavigate() const isLoading = useSelector((state: RootState) => state.user.isLoading); const [login, setLogin] = useState(''); const [password, setPassword] = useState(''); const onChangeLogin: React.ReactEventHandler<HTMLInputElement> = (e) => { setLogin(e.currentTarget.value); }; const onChangePassword: React.ReactEventHandler<HTMLInputElement> = (e) => { setPassword(e.currentTarget.value); }; const onSubmit: React.ReactEventHandler<HTMLFormElement> = (e) => { e.preventDefault(); dispatch(loginUserThunk({login, password})) .unwrap() .then(token => { // Тут уже есть токен dispatch(getUserThunk({token})) .unwrap() .then(() => { navigate('/'); }) .catch(({message}) => alert(message)); }) .catch(({message}) => alert(message)) }; return <main className="container small"> <h1>Вход:</h1> <form onSubmit={onSubmit} className="column"> <label> <span>Логин</span> <input type="text" onChange={onChangeLogin} value={login} /> </label> <label> <span>Пароль</span> <input type="password" onChange={onChangePassword} value={password} /> </label> <button disabled={isLoading}>Отправить</button> </form> </main> }; import {useEffect} from 'react'; import { Routes, Route, } from 'react-router-dom'; import {useDispatch} from 'react-redux'; import {Home} from '../pages/Home'; import {SignIn} from '../pages/SignIn'; import {getUserThunk, init} from '../features/user/userSlice'; import {AppDispatch} from '../store'; import {ProtectedRoute} from '../components/ProtectedRoute'; import {ROLE} from '../constants'; import {AdminPage} from "../pages/AdminPage"; export const App = () => { const dispatch: AppDispatch = useDispatch(); // Здесь нужно получать пользователя return ( <> <Routes> <Route path='/sign-in' element={<SignIn />} /> <Route path='/' element={<Home />} /> <Route path='/admin' element={<AdminPage />} /> </Routes> </> ) };