diff --git a/src/hooks/store.ts b/src/hooks/store.ts new file mode 100644 index 0000000..1859cbc --- /dev/null +++ b/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; +const useAppSelector: TypedUseSelectorHook = useSelector; + +export {useAppDispatch, useAppSelector}; diff --git a/src/index.tsx b/src/index.tsx index b5c2757..2b8e91f 100644 --- a/src/index.tsx +++ b/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( - + + + ); diff --git a/src/store/action.ts b/src/store/action.ts new file mode 100644 index 0000000..6d6aa77 --- /dev/null +++ b/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(), + })); diff --git a/src/store/index.ts b/src/store/index.ts new file mode 100644 index 0000000..b78131c --- /dev/null +++ b/src/store/index.ts @@ -0,0 +1,6 @@ +import {configureStore} from '@reduxjs/toolkit'; +import {reducer} from './reducer.ts'; + +export const store = configureStore({ + reducer: reducer +}); diff --git a/src/store/reducer.ts b/src/store/reducer.ts new file mode 100644 index 0000000..6f815de --- /dev/null +++ b/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; + }); +}); diff --git a/src/types/store.ts b/src/types/store.ts new file mode 100644 index 0000000..8b4ff4f --- /dev/null +++ b/src/types/store.ts @@ -0,0 +1,6 @@ +import {store} from '../store'; + +type RootState = ReturnType; +type AppDispatch = typeof store.dispatch; + +export type {RootState, AppDispatch};