カート状態が変化するたびに発火する仕組みを構築しよう

src/App.tsx

@@ -1,10 +1,17 @@
-import { useState } from "react";
+import { useEffect } from "react";
+import { useDispatch } from "react-redux";
+import cartItems from "./cartItems";
 import CartContainer from "./components/CartContainer";
 import Navbar from "./components/Navbar";
+import { calculateTotals } from "./features/cart/CartSlice";
+import { useAppSelector } from "./store";
 
 function App() {
-  const [count, setCount] = useState(0);
-
+  const dispatch = useDispatch();
+  const { cartItems } = useAppSelector((store) => store.cart);
+  useEffect(() => {
+    dispatch(calculateTotals());
+  }, [cartItems]);
   return (
     <div className="App">
       <Navbar />

src/components/CartContainer.tsx

@@ -42,7 +42,7 @@ const CartContainer = () => {
         </Stack>
         <Divider sx={{ my: 7 }} />
         <Box sx={{ textAlign: "right" }}>
-          <Typography variant="h3">合計:{total}円</Typography>
+          <Typography variant="h3">合計:{total.toLocaleString()}円</Typography>
         </Box>
         <Box mt={4} sx={{ textAlign: "center" }}>
           <Button