Initial commit

src/App.tsx

@@ -2,7 +2,7 @@ import {BrowserRouter, Routes, Route} from 'react-router-dom'
 import Home from './containers/Home'
 import Contacts from './containers/Contacts'
 import {Provider} from 'react-redux'
-import { store } from './store/store'
+import store from './store/store'
 
 const App = () => {
     return (

src/containers/Contacts.tsx

-import { useSelector } from 'react-redux'
+import { useAppSelector } from "../store/hooks";
+
 
 const Contacts = () => {
-    const state = useSelector((state) => state.contact.contactList)
+    const state = useAppSelector((state) => state.contact.contactList)
 
     console.log(state, "CONTACTS");
     

src/containers/Home.tsx

-import { useSelector } from "react-redux"
 import { addRandomContact } from "../store/slices/contact.slice";
-import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { changeTitle } from "../store/slices/home.slice";
+import { useAppDispatch, useAppSelector } from "../store/hooks";
 
 const Home = () => {
-    const dispatch = useDispatch()
+    const dispatch = useAppDispatch()
     const navigate = useNavigate()
 
-    const state = useSelector((state) => state)
+    const state = useAppSelector(state => state)
 
     console.log(state, "HOME");
     

src/store/hooks.ts

+import { useDispatch, useSelector } from 'react-redux'
+import type { TypedUseSelectorHook } from 'react-redux'
+import type { RootState, AppDispatch } from './store'
+
+
+export const useAppDispatch: () => AppDispatch = useDispatch
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
\ No newline at end of file

src/store/slices/home.slice.ts

-import { createSlice } from '@reduxjs/toolkit'
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 
 interface IState {
     homeTitle: string
@@ -12,7 +12,7 @@ export const homeSlice = createSlice({
     name: 'home',
     initialState,
     reducers: {
-        changeTitle: (state, action) => {
+        changeTitle: (state, action: PayloadAction<string>) => {
             state.homeTitle = action.payload
         }
     }

src/store/store.ts

@@ -2,9 +2,13 @@ import { configureStore } from '@reduxjs/toolkit'
 import { contactSlice } from './slices/contact.slice'
 import { homeSlice } from './slices/home.slice'
 
-export const store = configureStore({
+const store = configureStore({
     reducer: {
         contact: contactSlice.reducer,
         home: homeSlice.reducer
     }
-})
\ No newline at end of file
+})
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
+export default store;
\ No newline at end of file