Как аутентифицировать пользователя до рендера приложения в react?

Question

[Ярослав Студеникин]

Изучаю jwt авторизацию. Задача состоит в том чтобы написать логику авторизации пользователя на стеке react, redux, redux-saga.
Пользователя авторизовываю успешно при помощи формы логина. Сохраняю jwt token в local storage и данные о пользователе в redux store. Однако столкнулся с проблемой. Когда есть токен в хранилище, но нет в редаксе (например пользователь закрыл сайт и зашёл заново). Как правильно реализовать связь между запросом на сервер за пользователем и рендером приложения, что бы при наличии токена в хранилище приложение запустились только после запроса за пользователем? Поделитесь рекомендациями, best practices, так сказать)

Comments

[V Sh.]

А что мешает вам задать проверку токена в хранилище перед инициализацией redux? Вы же сами можете передавать состояние своего приложения при создании redux store.

[Ярослав Студеникин]

V Sh., Здравствуйте! Вы про место где приложение обернуто в Provider?

[V Sh.]

Ярослав Студеникин, нужно просто передать начальный state в нужный reducer

const initialState = {
    data: // ... async data request
}

const yourReducer = (state = initialState, action) =>...

Потом, когда у вас будет вызвваться createStore(yourReducer,...) первичное состояние само подхватится...

[Ярослав Студеникин]

V Sh., Хм, про запрос в инициализации состояния не подумал. Буду пробовать, спасибо!

[V Sh.]

Ярослав Студеникин, ну это один из способов. Еще можно при инициации корневого APP (в его коде) вызывать, если нужно, изменение состояния через хук useEffect. Думаю, что так будет лучше даже.

useEffect(() => {
        dispatch(getAuth());
    }, []);

Такая конструкция вызовется только один раз при создании App. В вызове getAuth() уже определить как брать данные: из локалсториджа или делать запрос к АПИ.
Я сам в redux новичок, поэтому не принимал бы мои ответы за аксиому.