Homework 13 -Localstorage, Privateroots

package.json

@@ -14,6 +14,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^2.11.2",
     "@tailwindcss/vite": "^4.2.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -23,6 +24,7 @@
     "react": "^19.2.0",
     "react-day-picker": "^9.14.0",
     "react-dom": "^19.2.0",
+    "react-redux": "^9.2.0",
     "react-router-dom": "^7.11.0",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.2.1"

src/App.tsx

@@ -14,6 +14,7 @@ function App() {
   const { products, isLoadingMore, loadError, loadMore } = useProductsFeed();
 
   const {
+    isSessionReady,
     isAuthenticated,
     isAdmin,
     authLabel,
@@ -38,6 +39,28 @@ function App() {
     [counts, products],
   );
 
+  if (!isSessionReady) {
+    return (
+      <Layout
+        headerContent={<AppHeaderNav isAdmin={false} />}
+        headerActions={
+          <AppHeaderActions
+            authLabel="Загрузка"
+            isAuthenticated={false}
+            totalItems={0}
+            authRoute={ROUTES.auth}
+            cartRoute={ROUTES.cart}
+            onLogout={logout}
+          />
+        }
+      >
+        <section className="py-10 text-sm text-muted-foreground">
+          Инициализация приложения...
+        </section>
+      </Layout>
+    );
+  }
+
   return (
     <Layout
       headerContent={<AppHeaderNav isAdmin={isAdmin} />}

src/components/providers/cart-provider.tsx

@@ -1,6 +1,14 @@
-import * as React from "react";
-
-type CartCounts = Record<string, number>;
+import * as React from "react";
+import { useAppDispatch, useAppSelector } from "@/store/hooks";
+import {
+  clearCart,
+  decrementCartItem,
+  hydrateCart,
+  incrementCartItem,
+  removeCartItem,
+  setCartItemCount,
+  type CartCounts,
+} from "@/store/slices/cart-slice";
 
 type CartContextValue = {
   counts: CartCounts;
@@ -18,67 +26,19 @@ type CartProviderProps = {
   initialCounts?: CartCounts;
 };
 
-type CartAction =
-  | { type: "increment"; productId: string }
-  | { type: "decrement"; productId: string }
-  | { type: "set"; productId: string; count: number }
-  | { type: "remove"; productId: string }
-  | { type: "clear" };
-
 const CartContext = React.createContext<CartContextValue | null>(null);
 
-const normalizeCount = (count: number): number =>
-  Number.isFinite(count) ? Math.max(0, Math.floor(count)) : 0;
-
-const setItemCount = (
-  current: CartCounts,
-  productId: string,
-  nextCount: number,
-): CartCounts => {
-  if (nextCount <= 0) {
-    if (!(productId in current)) {
-      return current;
-    }
-
-    const nextState = { ...current };
-    delete nextState[productId];
-    return nextState;
-  }
-
-  if (current[productId] === nextCount) {
-    return current;
-  }
+function CartProvider({ children, initialCounts }: CartProviderProps) {
+  const dispatch = useAppDispatch();
+  const counts = useAppSelector((state) => state.cart.counts);
 
-  return { ...current, [productId]: nextCount };
-};
-
-const cartReducer = (state: CartCounts, action: CartAction): CartCounts => {
-  switch (action.type) {
-    case "increment": {
-      const currentCount = state[action.productId] ?? 0;
-      return setItemCount(state, action.productId, currentCount + 1);
-    }
-    case "decrement": {
-      const currentCount = state[action.productId] ?? 0;
-      return setItemCount(state, action.productId, currentCount - 1);
+  React.useEffect(() => {
+    if (!initialCounts || Object.keys(initialCounts).length === 0) {
+      return;
     }
-    case "set": {
-      return setItemCount(state, action.productId, normalizeCount(action.count));
-    }
-    case "remove": {
-      return setItemCount(state, action.productId, 0);
-    }
-    case "clear": {
-      return Object.keys(state).length > 0 ? {} : state;
-    }
-    default: {
-      return state;
-    }
-  }
-};
 
-function CartProvider({ children, initialCounts = {} }: CartProviderProps) {
-  const [counts, dispatch] = React.useReducer(cartReducer, initialCounts);
+    dispatch(hydrateCart(initialCounts));
+  }, [dispatch, initialCounts]);
 
   const totalItems = React.useMemo(
     () => Object.values(counts).reduce((sum, count) => sum + count, 0),
@@ -90,25 +50,37 @@ function CartProvider({ children, initialCounts = {} }: CartProviderProps) {
     [counts],
   );
 
-  const increment = React.useCallback((productId: string) => {
-    dispatch({ type: "increment", productId });
-  }, []);
+  const increment = React.useCallback(
+    (productId: string) => {
+      dispatch(incrementCartItem({ productId }));
+    },
+    [dispatch],
+  );
 
-  const decrement = React.useCallback((productId: string) => {
-    dispatch({ type: "decrement", productId });
-  }, []);
+  const decrement = React.useCallback(
+    (productId: string) => {
+      dispatch(decrementCartItem({ productId }));
+    },
+    [dispatch],
+  );
 
-  const setCount = React.useCallback((productId: string, count: number) => {
-    dispatch({ type: "set", productId, count });
-  }, []);
+  const setCount = React.useCallback(
+    (productId: string, count: number) => {
+      dispatch(setCartItemCount({ productId, count }));
+    },
+    [dispatch],
+  );
 
-  const remove = React.useCallback((productId: string) => {
-    dispatch({ type: "remove", productId });
-  }, []);
+  const remove = React.useCallback(
+    (productId: string) => {
+      dispatch(removeCartItem({ productId }));
+    },
+    [dispatch],
+  );
 
   const clear = React.useCallback(() => {
-    dispatch({ type: "clear" });
-  }, []);
+    dispatch(clearCart());
+  }, [dispatch]);
 
   const contextValue = React.useMemo(
     () => ({