Как интегрировать React Router с Redux

Что такое React Router и Redux?

Прежде чем начать, давайте немного поговорим о том, что из себя представляют эти инструменты. React Router отвечает за маршрутизацию в вашем приложении. Он помогает перемещаться между разными страницами или компонентами без перезагрузки страницы. Redux же используется для управления состоянием. Это как центр управления данными вашего приложения, который позволяет вам получать доступ к данным и изменять их в любом месте приложения.

Интеграция этих двух инструментов нужна, чтобы обеспечить более гибкое управление состоянием на основе маршрутов. Например, вы можете сохранять текущий маршрут в Redux, использовать его для аналитики или управлять доступом к страницам.

Как настроить базовую интеграцию React Router и Redux

Для начала вам понадобится установить библиотеки. Предположим, у вас уже есть проект на React. В противном случае сначала создайте его с помощью create-react-app. После этого установите необходимые пакеты: React Router, Redux и React-Redux.

1. Установка библиотек:

npm install react-router-dom redux react-redux

Теперь давайте настроим их в проекте. Создайте хранилище (store) с помощью Redux и добавьте маршруты с помощью React Router.

2. Настройка Redux-хранилища:
Создайте папку store и файл index.js для инициализации хранилища. Это будет основа для управления состоянием.

import { createStore } from 'redux';



// Простейший редюсер

const initialState = {

  route: '/'

};



function rootReducer(state = initialState, action) {

  if (action.type === 'SET_ROUTE') {

    return { ...state, route: action.payload };

  }

  return state;

}



// Создаем хранилище

const store = createStore(rootReducer);



export default store;

3. Настройка маршрутов с React Router:
Создайте файл App.js и настройте маршруты с помощью react-router-dom.

import React from 'react';

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';



function Home() {

  return <h1>Домашняя страница</h1>;

}



function About() {

  return <h1>О нас</h1>;

}



function App() {

  return (

    <Router>

      <Switch>

        <Route path="/" exact component={Home} />

        <Route path="/about" component={About} />

      </Switch>

    </Router>

  );

}



export default App;

Как связать Redux с React Router

Теперь, когда у нас есть базовая структура приложения, давайте настроим их взаимодействие. Основная идея состоит в том, чтобы сохранять информацию о текущем маршруте в Redux и использовать состояние Redux для управления компонентами.

1. Использование Redux в компонентах маршрутизации:
Внедрите Redux в ваше приложение с помощью Provider из библиотеки react-redux.

import React from 'react';

import ReactDOM from 'react-dom';

import { Provider } from 'react-redux';

import store from './store';

import App from './App';



ReactDOM.render(

  <Provider store={store}>

    <App />

  </Provider>,

  document.getElementById('root')

);

2. Обновление Redux-хранилища при изменении маршрута:
Чтобы связать маршруты с Redux, используйте компонент useHistory из React Router и обновляйте состояние в Redux при изменении маршрута.

import React, { useEffect } from 'react';

import { useHistory } from 'react-router-dom';

import { useDispatch } from 'react-redux';



function App() {

  const history = useHistory();

  const dispatch = useDispatch();



  useEffect(() => {

    // Подписываемся на изменения маршрута

    const unlisten = history.listen((location) => {

      dispatch({ type: 'SET_ROUTE', payload: location.pathname });

    });

    return () => unlisten();

  }, [history, dispatch]);



  return (

    <div>

      <h1>Приложение с маршрутизацией и Redux</h1>

    </div>

  );

}



export default App;

Пример: Показ определённого компонента на основе маршрута из Redux

Теперь, когда состояние маршрута сохраняется в Redux, вы можете использовать его для отображения определённых компонентов или выполнения других действий.

1. Подключение компонента к Redux:
Используйте хук useSelector для получения текущего маршрута из хранилища Redux.

import React from 'react';

import { useSelector } from 'react-redux';



function Header() {

  const currentRoute = useSelector((state) => state.route);



  return (

    <header>

      <h1>Текущий маршрут: {currentRoute}</h1>

    </header>

  );

}



export default Header;

2. Условное отображение на основе состояния:
Если вам нужно показывать разные компоненты на основе маршрута, это тоже можно сделать.

function MainContent() {

  const currentRoute = useSelector((state) => state.route);



  if (currentRoute === '/') {

    return <Home />;

  } else if (currentRoute === '/about') {

    return <About />;

  } else {

    return <h1>Страница не найдена</h1>;

  }

}

Теперь ваше приложение может управлять состоянием и маршрутизацией централизованно!