# 🚀 Save Your Cart! Redux Store Setup & LocalStorage Persistence | React E-Commerce | Lesson 9 [በአማርኛ]
Don’t let your users lose their shopping carts! In this lesson, we implement **Redux Store Persistence** using the LocalStorage API. We ensure that even after a page refresh, the user’s cart items remain intact. We also cover the high-efficiency **VS Code Internal Browser** update to streamline your development workflow.
—
### 📑 Lesson Chapters (Precise Timestamps)
* **00:00** – VS Code Internal Browser Update: Faster Dev Workflow
* **00:40** – Initializing the Redux Store (`store.js`)
* **01:36** – Creating the `loadState` Utility for Persistence
* **02:35** – Data Validation: Handling LocalStorage Parsing
* **02:55** – State Hydration: Restoring Cart Data on Startup
* **03:13** – Redux `subscribe()`: Auto-Saving State Changes
* **05:13** – App Integration: Providing the Store Globally
* **06:18** – `useSelector` Hook: Syncing the Navbar Cart Counter
* **07:05** – Testing & Verification: Persistence Final Demo
### 🛠️ Technical Implementation Details
1. **Redux Toolkit Setup:** Configuring the centralized `configureStore` to manage global state.
2. **LocalStorage API:** Implementing `localStorage.setItem` and `localStorage.getItem` within a robust `try/catch` block for data safety.
3. **Automatic Persistence:** Using the Redux `store.subscribe()` method to listen for state changes and update the browser memory instantly.
4. **UI Data Mapping:** Connecting the global cart `totalQuantity` to your header component using `useSelector` for a live, professional user experience.
—
### 💬 Support Beshilo Coding Academy
If this lesson helped you, please:
✅ **Like** the video to help it reach more Ethiopian developers.
✅ **Subscribe** for the next part of this series!
✅ **Comment** “Lesson 9” if your persistence logic is working!
#ReactJS #ReduxToolkit #LocalStorage #EcommerceProject #WebDevelopment #AmharicCoding #BeshiloCoding #StatePersistence #ReactCourse #EthiopiaTech #VScodeUpdate