финалит

package.json

@@ -10,7 +10,7 @@
     "test": "vitest --passWithNoTests"
   },
   "dependencies": {
-    "@reduxjs/toolkit": "1.9.7",
+    "@reduxjs/toolkit": "2.2.1",
     "axios": "1.5.1",
     "dayjs": "1.11.10",
     "history": "5.3.0",
@@ -19,7 +19,6 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-helmet-async": "1.3.0",
-    "react-redux": "8.1.3",
     "react-router-dom": "6.16.0",
     "vite-plugin-rewrite-all": "1.0.2"
   },
@@ -32,7 +31,7 @@
     "@types/leaflet": "1.9.3",
     "@types/react": "18.2.25",
     "@types/react-dom": "18.2.11",
-    "@types/react-redux": "7.1.27",
+    "@types/react-redux": "7.1.33",
     "@types/testing-library__jest-dom": "5.14.9",
     "@typescript-eslint/eslint-plugin": "6.7.4",
     "@typescript-eslint/parser": "6.7.4",

src/app.tsx

@@ -7,15 +7,8 @@ import Offer from './pages/offer/offer.tsx';
 import PrivateRoute from './components/private-route/private-route.tsx';
 import Login from './pages/login/login.tsx';
 import PublicRoute from './components/public-route/public-route.tsx';
-import {OfferShortInfo} from './types/offer.ts';
 
-interface AppProps {
-  offersCount: number;
-  offers: OfferShortInfo[];
-  offersFavorites: OfferShortInfo[];
-}
-
-function App({offersCount, offers, offersFavorites}: AppProps) {
+function App() {
 
   return (
     <BrowserRouter>
@@ -27,8 +20,8 @@ function App({offersCount, offers, offersFavorites}: AppProps) {
         {CITIES.map((city) => (
           <Route
             key={city.slug}
-            path={AppRoute.Root + city.slug}
-            element={<Main offers={offers} offersCount={offersCount} />}
+            path={AppRoute.Root + city.name}
+            element={<Main citySlug={city.slug} />}
           />
         )
         )}
@@ -48,7 +41,7 @@ function App({offersCount, offers, offersFavorites}: AppProps) {
             <PrivateRoute
               authorizationStatus={AuthorizationStatus.Auth}
             >
-              <Favorites offersFavorites={offersFavorites} />
+              <Favorites />
             </PrivateRoute>
           }
         />

src/components/location-tab/location-tab.tsx

@@ -11,7 +11,7 @@ function LocationTab({cities = CITIES}: LocationTabProps) {
     cities.map((city) => (
       <NavLink
         key={city.slug}
-        to={AppRoute.Root + city.slug}
+        to={AppRoute.Root + city.name}
         className={({isActive}) =>
           classNames('locations__item-link tabs__item', isActive && 'tabs__item--active')}
       >

src/components/map/map.tsx

@@ -5,11 +5,12 @@ import {CITIES, URL_MARKER_CURRENT, URL_MARKER_DEFAULT} from '../../const';
 import 'leaflet/dist/leaflet.css';
 import useMap from '../../hooks/use-map.tsx';
 import {OfferShortInfo} from '../../types/offer.ts';
+import {useAppSelector} from '../../hooks/store.ts';
+import {offersSelectors} from '../../store/slices/offers.ts';
 
 type MapProps = {
   city: typeof CITIES[number];
   offers: OfferShortInfo[];
-  activeOffer: OfferShortInfo | null;
   container: string;
 };
 
@@ -25,7 +26,8 @@ const currentCustomIcon = new Icon({
   iconAnchor: [20, 40]
 });
 
-function Map({container, city, offers, activeOffer}: MapProps) {
+function Map({container, city, offers}: MapProps) {
+  const activeOffer = useAppSelector(offersSelectors.activeOffer);
 
   const mapRef = useRef(null);
   const map = useMap(mapRef, city);

src/const.ts

@@ -29,7 +29,7 @@ const CITY_NAMES = [
   'Dusseldorf',
 ] as const;
 
-const DEFAULT_CITY_SLUG = CITIES[0].slug;
+const DEFAULT_CITY_SLUG = CITIES[0].name;
 
 const OFFER_TYPES = [
   'hotel',

src/hooks/store.ts

@@ -1,7 +1,15 @@
 import {TypedUseSelectorHook, useDispatch, useSelector} from 'react-redux';
 import {AppDispatch, RootState} from '../types/store.ts';
+import {ActionCreatorsMapObject, bindActionCreators} from '@reduxjs/toolkit';
+import {useMemo} from 'react';
 
 const useAppDispatch = useDispatch<AppDispatch>;
 const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
 
-export {useAppDispatch, useAppSelector};
+const useActionCreators = <Actions extends ActionCreatorsMapObject>(actions: Actions) => {
+  const dispatch = useAppDispatch();
+
+  return useMemo(() => bindActionCreators(actions, dispatch), []);
+};
+
+export {useAppDispatch, useAppSelector, useActionCreators};

src/index.tsx

@@ -1,22 +1,17 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './app.tsx';
-import {OFFERS_COUNT} from './const.ts';
-import {getFavoriteOffers, getOffersShortInfo} from './mocks/offers.ts';
 import {Provider} from 'react-redux';
 import {store} from './store';
 
-const offers = getOffersShortInfo();
-const offersFavorites = getFavoriteOffers();
-
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 
 root.render(
   <React.StrictMode>
     <Provider store={store}>
-      <App offers={offers} offersFavorites={offersFavorites} offersCount={OFFERS_COUNT} />
+      <App />
     </Provider>
   </React.StrictMode>
 );