Created slice, store, and hooks. Started adding them into the calender component.

src/app/hooks.ts

@@ -0,0 +1,5 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
+import { RootState, AppDispatch } from "./store";
+
+export const useAppDiscpatch = () => useDispatch<AppDispatch>();
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

src/app/store.ts

@@ -0,0 +1,11 @@
+import { configureStore } from "@reduxjs/toolkit";
+import calenderReducer from "../features/calender/calender";
+
+export const store = configureStore({
+  reducer: {
+    calender: calenderReducer
+  }
+});
+
+export type AppDispatch = typeof store.dispatch;
+export type RootState = ReturnType<typeof store.getState>;

src/components/calender/index.tsx

@@ -1,13 +1,19 @@
 import React, { useContext, useEffect } from "react";
 import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react";
 import { isSameDay, format } from "date-fns";
+import { useAppDiscpatch, useAppSelector } from "../../app/hooks";
+import { updateCurrDate, updateMonth } from '../../features/calender/calender';
 import { CalenderContext } from "../../../contexts/CalenderContext";
 import { StickersContext } from "../../../contexts/StickerContext";
 import CalenderNav from "./CalenderNav";
 import Day from "./Day";
 
 const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
-  const { selectedDate, layout, updateDate, currDate, setCurrDate } =
+  const currDate: Date = useAppSelector(state => state.calender.currDate);
+  const seletedMonth = useAppSelector(state => state.calender.selectedDateInfo);
+
+
+  const { selectedDate, layout, updateDate,/* currDate, */setCurrDate } =
     useContext(CalenderContext);
   const { stickersMonth } = useContext(StickersContext);
 
@@ -106,7 +112,7 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
                     id.length
                       ? id
                       : format(date, "yyyyddLL") +
-                        `/${sticker === null ? 0 : sticker}`
+                      `/${sticker === null ? 0 : sticker}`
                   }
                 />
               );

src/features/calender/calender.ts

@@ -0,0 +1,46 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { format } from "date-fns";
+
+interface CalenderSlice {
+  currDate: Date;
+  selectedDateInfo: {
+    selectedDate: Date;
+    title: string;
+    layout: MonthLayout;
+  };
+}
+
+const getCurrDate = (): Date => new Date();
+const dateFormatter = (date: Date): string => format(date, "LLLL uuuu");
+
+const initialState: CalenderSlice = {
+  currDate: getCurrDate(),
+  selectedDateInfo: {
+    selectedDate: getCurrDate(),
+    title: dateFormatter(new Date()),
+    layout: {} as MonthLayout
+  }
+};
+
+const calenderSlice = createSlice({
+  name: "Calender",
+  initialState,
+  reducers: {
+    // Populate month
+    // Update month info
+    updateMonth(state: CalenderSlice, action: PayloadAction<Date>) {
+      const { payload: newDate } = action;
+
+      state.selectedDateInfo.selectedDate = newDate;
+      state.selectedDateInfo.title = dateFormatter(newDate);
+      // ! Add the layout formatter function
+    },
+    // Update current date
+    updateCurrDate(state: CalenderSlice) {
+      state.currDate = new Date();
+    }
+  }
+});
+
+export const { updateMonth, updateCurrDate } = calenderSlice.actions;
+export default calenderSlice.reducer;

src/pages/index.tsx

@@ -1,9 +1,11 @@
 import React, { useRef } from "react";
 import { Box } from "@chakra-ui/react";
-import Calender from "../components/calender";
+import { format } from "date-fns";
+import { Provider } from "react-redux";
+import { store } from "../app/store";
 import { StickersContextProvider } from "../../contexts/StickerContext";
 import { CalenderContextProvider } from "../../contexts/CalenderContext";
-import { format } from "date-fns";
+import Calender from "../components/calender";
 
 const IndexPage = (): JSX.Element => {
   const date = useRef<UpdateCalendarProps>({
@@ -16,7 +18,9 @@ const IndexPage = (): JSX.Element => {
     <Box textAlign="center" w="100%" h="auto" pt="50px" pb="10vh">
       <StickersContextProvider>
         <CalenderContextProvider>
-          <Calender {...date.current} />
+          <Provider store={store}>
+            <Calender {...date.current} />
+          </Provider>
         </CalenderContextProvider>
       </StickersContextProvider>
     </Box>