React + Redux + Router теряется state при смене страницы
Reduser.js
const defaultState = {
isAuth: false,
}
const AUTH = "AUTH";
export const userReducer = (state = defaultState, action) => {
switch(action.type) {
...
}
}
export const authUserAction = (payload) => ({type: AUTH, payload});
App.js
function App() {
const isAuth = useReduser(state => state.isAuth);
useEffect(() => {
... // какое-то условие
dispatch(authUserAction(true))
}, []);
return (
<BrowserRouter>
<Provider store={store}>
<Routes>
{isAuth && <Route path="/authPage" element={<AuthPage />} />}}
<Route path="/" element={<WelcomePage />} />
// Редирект (*)
<Route
path="*"
element={<Navigate to="/" replace/>}
/>
</Routes>
</Provider>
</BrowserRouter>
);
}
В моем проекте есть страницы, которые можно посещать только если пользователь авторизован, и если не авторизованный пользователь попытается посетить такую страницу, сработает редирект на главную страницу (*).
При загрузке страницы, в useEffect, происходит проверка jwt токена и смена Redux стейта.
Если перейти на другую страницу, то переменная isAuth 'потеряет' свой стейт и придется ещё раз проверять авторизован ли пользователь. но так как useEffect срабатывает после рендера, то успеет сработать редирект на главную. В этом и заключается ошибка.
Можно ли как-либо 'связать' redux и react-router
Ответы (1 шт):
Много времени прошло, я уж и не смогу проверить ответ, но скорее всего, проблема была в том что провайдер находился внутри BrowserRouter, хотя должно быть наоборот. Если сталкиваетесь с подобной проблемой, проверьте, что создаете провайдер правильно