Как интегрировать React Router DOM с системой управления состоянием, например, Redux?

Question

Интеграция React Router DOM с Redux позволяет использовать состояние Redux для управления маршрутизацией, например, для перенаправлений на основе состояния пользователя. Это достигается через использование хуков, таких как useSelector и useDispatch, в компонентах маршрутов.

YeaHub · Accepted Answer

Пример с проверкой аутентификации через Redux:Создайте хранилище Redux с состоянием пользователя:const initialState = { isAuthenticated: false }; const authReducer = (state = initialState, action) => { switch (action.type) { case 'LOGIN': return { ...state, isAuthenticated: true }; case 'LOGOUT': return { ...state, isAuthenticated: false }; default: return state; } };Подключите Redux к React приложению:import { Provider } from 'react-redux'; import { createStore } from 'redux'; const store = createStore(authReducer); const App = () => ( );Использование состояния Redux в маршрутах:Проверьте состояние перед рендерингом защищенных маршрутов:import { useSelector } from 'react-redux'; import { Navigate } from 'react-router-dom'; const ProtectedRoute = ({ children }) => { const isAuthenticated = useSelector(state => state.isAuthenticated); return isAuthenticated ? children : ; };Интеграция с редиректами:Используйте useDispatch для программной смены маршрутов:import { useDispatch } from 'react-redux'; import { useNavigate } from 'react-router-dom'; const LoginPage = () => { const dispatch = useDispatch(); const navigate = useNavigate(); const handleLogin = () => { dispatch({ type: 'LOGIN' }); navigate('/dashboard'); }; return ; };Преимущества:Централизация управления состоянием и маршрутизацией.Удобство перенаправлений на основе глобального состояния.