готовит redux

src/hooks/store.ts

@@ -0,0 +1,7 @@
+import {TypedUseSelectorHook, useDispatch, useSelector} from 'react-redux';
+import {AppDispatch, RootState} from '../types/store.ts';
+
+const useAppDispatch = useDispatch<AppDispatch>;
+const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
+
+export {useAppDispatch, useAppSelector};

src/index.tsx

@@ -3,6 +3,8 @@ 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();
@@ -13,6 +15,8 @@ const root = ReactDOM.createRoot(
 
 root.render(
   <React.StrictMode>
-    <App offers={offers} offersFavorites={offersFavorites} offersCount={OFFERS_COUNT} />
+    <Provider store={store}>
+      <App offers={offers} offersFavorites={offersFavorites} offersCount={OFFERS_COUNT} />
+    </Provider>
   </React.StrictMode>
 );

src/store/action.ts

@@ -0,0 +1,15 @@
+import {createAction} from '@reduxjs/toolkit';
+import {CITIES} from '../const.ts';
+import {getOffersShortInfo} from '../mocks/offers.ts';
+
+export const setCityAction = createAction(
+  'main/city',
+  (value: typeof CITIES[number]['slug']) => ({
+    payload: value
+  }));
+
+export const getOffersShortInfoAction = createAction(
+  'main/offers-short',
+  () => ({
+    payload: getOffersShortInfo(),
+  }));

src/store/index.ts

@@ -0,0 +1,6 @@
+import {configureStore} from '@reduxjs/toolkit';
+import {reducer} from './reducer.ts';
+
+export const store = configureStore({
+  reducer: reducer
+});

src/store/reducer.ts

@@ -0,0 +1,25 @@
+import {CITIES, DEFAULT_CITY_SLUG} from '../const.ts';
+import {getOffersShortInfo} from '../mocks/offers.ts';
+import {createReducer} from '@reduxjs/toolkit';
+import {getOffersShortInfoAction, setCityAction} from './action.ts';
+import {OfferShortInfo} from '../types/offer.ts';
+
+interface State {
+  city: typeof CITIES[number]['slug'];
+  offers: OfferShortInfo[];
+}
+
+const initialState: State = {
+  city: DEFAULT_CITY_SLUG,
+  offers: getOffersShortInfo(),
+};
+
+export const reducer = createReducer(initialState, (builder) => {
+  builder
+    .addCase(setCityAction, (state, action) => {
+      state.city = action.payload;
+    })
+    .addCase(getOffersShortInfoAction, (state, action) => {
+      state.offers = action.payload;
+    });
+});

src/types/store.ts

@@ -0,0 +1,6 @@
+import {store} from '../store';
+
+type RootState = ReturnType<typeof store.getState>;
+type AppDispatch = typeof store.dispatch;
+
+export type {RootState, AppDispatch};