refactor: migrate project to TypeScript and translate comments to English

store/cartSlice.ts

@@ -1,6 +1,9 @@
+import type {PayloadAction} from '@reduxjs/toolkit';
+import type {CartProduct, CartState} from '@/types/domain';
+import type {RootState} from './store';
 import { createSlice } from '@reduxjs/toolkit';
 
-const initialState = {
+const initialState: CartState = {
   items: [], // { id, name, priceNumeric, priceLabel, qty, image }
   isDrawerOpen: false,
 };
@@ -9,7 +12,7 @@ const cartSlice = createSlice({
   name: 'cart',
   initialState,
   reducers: {
-    addToCart: (state, action) => {
+    addToCart: (state, action: PayloadAction<CartProduct>) => {
       const product = action.payload;
       const existing = state.items.find((item) => item.id === product.id);
       if (existing) {
@@ -19,20 +22,20 @@ const cartSlice = createSlice({
       }
       state.isDrawerOpen = true;
     },
-    removeFromCart: (state, action) => {
+    removeFromCart: (state, action: PayloadAction<string>) => {
       state.items = state.items.filter((item) => item.id !== action.payload);
     },
-    setQuantity: (state, action) => {
+    setQuantity: (state, action: PayloadAction<{id: string; qty: number}>) => {
       const { id, qty } = action.payload;
       if (!Number.isSafeInteger(qty) || qty < 1) return;
       const item = state.items.find((item) => item.id === id);
       if (item) item.qty = qty;
     },
-    incrementQty: (state, action) => {
+    incrementQty: (state, action: PayloadAction<string>) => {
       const item = state.items.find((item) => item.id === action.payload);
       if (item) item.qty += 1;
     },
-    decrementQty: (state, action) => {
+    decrementQty: (state, action: PayloadAction<string>) => {
       const item = state.items.find((item) => item.id === action.payload);
       if (item && item.qty > 1) {
         item.qty -= 1;
@@ -68,11 +71,11 @@ export const {
 } = cartSlice.actions;
 
 // Selectors
-export const selectCartItems = (state) => state.cart.items;
-export const selectCartCount = (state) =>
+export const selectCartItems = (state: RootState) => state.cart.items;
+export const selectCartCount = (state: RootState) =>
   state.cart.items.reduce((sum, item) => sum + item.qty, 0);
-export const selectCartTotal = (state) =>
+export const selectCartTotal = (state: RootState) =>
   state.cart.items.reduce((sum, item) => sum + item.qty * item.priceNumeric, 0);
-export const selectIsDrawerOpen = (state) => state.cart.isDrawerOpen;
+export const selectIsDrawerOpen = (state: RootState) => state.cart.isDrawerOpen;
 
 export default cartSlice.reducer;

store/hooks.ts

@@ -0,0 +1,7 @@
+'use client';
+
+import { useDispatch, useSelector } from 'react-redux';
+import type { AppDispatch, RootState } from './store';
+
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>();
+export const useAppSelector = useSelector.withTypes<RootState>();

store/store.ts

@@ -10,3 +10,7 @@ export const makeStore = () =>
 
 // Singleton store for the client (App Router renders providers on the client tree).
 export const store = makeStore();
+
+export type AppStore = ReturnType<typeof makeStore>;
+export type RootState = ReturnType<AppStore["getState"]>;
+export type AppDispatch = AppStore["dispatch"];