Как сделать рендер компонента после получения данных с Api?
Необходимый стек: react, redux, react-router 3, redux-saga.
Суть вопроса такова, есть некий интерфейс для авторизованного пользователя.
Связь с api осуществляется через токен, который храниться в local storage. При инициализации приложения, чекается токен, и если он имеется, выставляться чек в store редакса, что пользователь авторизован и срабатывает сага по загрузке данных пользователя, но в момент, когда сервер собирает данные для клиента, у пользователя крутиться прелоадер, и появляются не очень красивые сайд эффекты из-за которых и хотелось бы закрыть рендер компонентов страницы, до того пока сервер не вернул данные на клиент.
Так вот, каким образом, либо как правильно построить логику, чтобы рендер компонентов страницы, либо всего приложения осуществлялся после получения данных и убрать неприятные моменты по типу, запустилось приложение, пользователь увидел кнопку "Войти", через 1-2с она изменилась на аву с никнеймом.
Ну логика должна быть простая когда пользователь жмёт кнопку авторизации показывайте прелодер. Этот прелодер должен крутиться до тех пор пока не придут данные. Когда данные приходят вы должна его остановить для этого лучше иметь в редуксе какой нибудь флать типа loading. При нажатии авторизации данный флаг устанавливается в true. И как только данные пришли устанавливаете флаг в false. А в компоненте повесить проверку если true то показывать прелоадер а если false то показывать результат авторизиции (имя пользователя аву и тд) и прятать прелоадер.
Внимательней прочитайте описание вопроса.
В кратце: пользователь авторизован - жмет f5 - происходит чек на токен, загрузка данных с api, в этот момент на экране не должно быть не лоадеров, не смены компонентов с войти - на имя пользователя.
Bogopodoben: если пользователь был авторизован то вы можете положить все данные в локал стор и при нажатии f5 не кидать на окно авторизации а кидать на компонент с данными и без прелоадера
Роман Александрович: нет такой вариант не подходит. В случае получения новых данных пользователя, у многих компонентов будет перерендер с новыми данными, это будет выглядить просто "вырви глаза".
На данный момент, меняется просто компонент со входа - на фио юзера.
В Вашем случае у меня будет вся страница себя так вести, потом что 70% данных пользователя изменяются.
Bogopodoben: у вас есть токен. вы его храните в локал сторе после 1 раза авторизации. вы получили данные о пользователе и можете засунуть его в локал стор. при нажатии f5 вы из локал стора должны взять токен и попросить данные о пользователе заново и сравнить с данными из локал стора если они одинаковые то сразу переходить на страницу с ФИО. если они разные то засунуть новые данные в локал стор и потом переходить на страницу с ФИО.
Роман Александрович: Что будет видеть пользователь, если он на прямую из адресной строки перейдет на эту страницу? Тот же самый прелоадер, что был и до этого? Либо готовую страницу, которая потом измениться в себе большую часть данных?
Bogopodoben: а пользователь вапще не должен иметь возможность через адресную строку куда то переходить. даже если так вы его направляете на роут авторизации в которой у вас лежит проверка если в локал сторе есть токен то сразу делать запрос на апи и сравнение данных а если нет то показывать форму авторизации
Роман Александрович: Не соглашусь, авторизованный пользователь может и должен иметь переходить с урла на нужную страницу.
По вашей логике: Захожу на урл user/profile меня зачем то редиректит на /login (допустим), там почему-то выполняется проверка на токен и загрузка данных и оттуда меня неизвестно куда должно редиректнуть.
Авторизация - это авторизация, пользователь с токеном, туда доступа не должен даже иметь, так как подразумеватся, что он уже авторизован.
На данный момент решение вопроса только с помощью ssr вижу.
Благодарю за мысли.
Простой