How to use createAsyncThunk for async calls in Redux

SK— useRef (Build a Timer) 💡 Explanation: useRef holds values without causing re-renders. Great for timers, intervals & DOM elements. 🧩 Example: Timer function Timer() { const timerRef = useRef(null); const [seconds, setSeconds] = useState(0); const start = () => { timerRef.current = setInterval(() => setSeconds(s => s + 1), 1000); }; const stop = () => clearInterval(timerRef.current); return ( <> <h2>{seconds}s</h2> <button onClick={start}>Start</button> <button onClick={stop}>Stop</button> </> ); } 💬 Question: Have you ever used useRef to store previous values? 📌 Follow Sasikumar S for daily React reflections, dev career insights & coding inspiration. 🤝 Connect Now: sasiias2024@gmail.com 💟 Visit: sk-techland.web.app ❤️ Follow our LinkedIn Page for more React, JavaScript & software engineering growth. #ReactJS #WebDevelopment #FrontendDeveloper #JavaScript #SystemDesign #CodingJourney #SoftwareEngineering #ErrorHandling #GitFlow #ReactProjectStructure #CareerGrowth #MockInterview #TechLearning #ProblemSolving #DeveloperMindset

📍 SK — Reusable Component Patterns 💡 Explanation Reusable components reduce repetition and increase maintainability. A reusable component should be generic, configurable, and stateless as much as possible. 🧩 Example: Reusable Button Component export default function Button({ children, variant = "primary", onClick }) { const base = "px-4 py-2 rounded-md font-medium"; const styles = { primary: base + " bg-blue-600 text-white", outline: base + " border border-blue-600 text-blue-600" }; return <button className={styles[variant]} onClick={onClick}>{children}</button>; } // Usage: <Button variant="outline">Add to Cart</Button> 💬 Question Which component do you find yourself rewriting most often? (Button, Modal, Card, Input?) 📌 Follow Sasikumar S for daily React reflections, dev career insights & coding inspiration. 🤝 Connect Now: sasiias2024@gmail.com 💟 Visit: sk-techland.web.app ❤️ Follow our LinkedIn Page for more React, JavaScript & software engineering growth. #ReactJS #WebDevelopment #FrontendDeveloper #JavaScript #SystemDesign #CodingJourney #SoftwareEngineering #ErrorHandling #GitFlow #ReactProjectStructure #CareerGrowth #MockInterview #TechLearning #ProblemSolving #DeveloperMindset

Learned this the hard way: Why backend validation isn't optional 🤦♂️ So I was building the registration flow for EduChat and thought I was being smart... I had all the validation on the frontend - checking for username, email format, required fields, everything. Looked good, worked perfectly in the UI. Then I started testing the backend API directly. Forgot to send the username field in one test request. The API just... accepted it. Created the user with a blank username. Checked the database later and saw multiple records with empty usernames staring back at me 😅 (I did have email duplicate validation working though, so at least there's that) What I learned: Frontend validation = Good UX Instant feedback to users Catches mistakes before submission Feels responsive and professional Backend validation = Actual security Frontend can be bypassed (inspect element, API calls, etc.) Someone can hit your endpoints directly Your database doesn't care about your nice UI validations The reality check: Frontend validation is for the user. Backend validation is for your data. You need both. Always. Now my backend validates everything: # FastAPI endpoint now looks like this @app.post("/register") async def register(user: UserCreate):   if not user.username or len(user.username) < 3:     raise HTTPException(400, "Username required (min 3 chars)")   if not user.email or "@" not in user.email:     raise HTTPException(400, "Valid email required")   # ... rest of validation The lesson: Never trust data coming from the client. Ever. Even if you wrote the client yourself. Anyone else learned this the hard way? Or am I the only one who had to clean up a database full of blank usernames? 😂 #webdevelopment #backend #frontend #security #validation #fastapi #python #react #javascript #nodejs #api #restapi #coding #programming #softwaredevelopment #webdev #developer #backend #fullstack #mernstack #datavalidation #apidevelopment #cleancode #bestpractices #lessonslearned #buildinginpublic #devlife #coding #tech #softwaredeveloper #webdeveloper #programming #code #debugging

SK — JSX & Component Architecture 🧠 Concept: JSX lets you write HTML-like syntax inside JavaScript. React apps are built using components — small reusable UI blocks. Benefit: Cleaner, modular code → easier to maintain and scale. 🧩 Example function Greeting() { return <h3>Hello Developer 👋</h3>; } function App() { return ( <div> <Greeting /> <Greeting /> </div> ); } 💬 Question: Do you prefer creating small reusable components or larger combined ones? 📌 Follow Sasikumar S for daily React reflections, dev career insights & coding inspiration. 🤝 Connect Now: sasiias2024@gmail.com 💟 Visit: sk-techland.web.app ❤️ Follow our LinkedIn Page for more React, JavaScript & software engineering growth. #ReactJS #WebDevelopment #FrontendDeveloper #JavaScript #SystemDesign #CodingJourney #SoftwareEngineering #ErrorHandling #GitFlow #ReactProjectStructure #CareerGrowth #MockInterview #TechLearning #ProblemSolving #DeveloperMindset

💚 Master Node.js the Smart Way — with Handwritten Notes! ⚡ If you’ve been struggling to understand backend development — these handwritten Node.js notes are your shortcut to clarity! Perfect for students, developers, and interview prep, these notes simplify complex concepts into visual, easy-to-grasp explanations. 📘 What You’ll Learn: ✅ Core Node.js Concepts ✅ Modules, Events & Streams ✅ Express.js Basics ✅ File System & Middleware ✅ Real-world Interview Topics Whether you're revising before interviews or starting your backend journey — this is your ultimate quick-learning companion. ♻ Repost to help your dev friends learn faster! 🔔 Follow Ahmed Ali for more Dev & AI resources. #NodeJS #BackendDevelopment #WebDevelopment #JavaScript #CodingCommunity #FullStackDeveloper #100DaysOfCode #LearnCoding #WebDev #ProgrammersLife #TechLearning #Developers

⚡ SK – Destructuring & Spread/Rest Operators: Simplifying Your JavaScript Code 💡 Explanation (Clear + Concise) Destructuring and spread/rest operators make your JavaScript code cleaner, shorter, and more readable — by unpacking or combining data from arrays and objects efficiently. 🧩 Real-World Example (Code Snippet) // 🧱 Object Destructuring const user = { name: "Sasi", role: "React Developer", city: "Chennai" }; const { name, role } = user; console.log(`${name} works as a ${role}`); // Sasi works as a React Developer // 🔁 Array Destructuring const skills = ["React", "Redux", "TypeScript"]; const [primarySkill, , extraSkill] = skills; console.log(primarySkill, extraSkill); // React TypeScript // 🚀 Spread Operator (copy or merge) const devDetails = { ...user, country: "India" }; // 🧩 Rest Operator (group remaining) const { city, ...profile } = user; console.log(profile); // { name: 'Sasi', role: 'React Developer' } ✅ Why It Matters in React: Extract props and state easily: const { title, price } = product; Pass data without mutating: setUser({ ...user, loggedIn: true }); 💬 Question: What’s one place in your recent React project where destructuring made your code cleaner? 📌 Follow Sasikumar S for more daily dev reflections, real-world coding insights & React mastery. 🤝 Connect Now: sasiias2024@gmail.com 💟 Visit: sk-techland.web.app ❤️ Follow our LinkedIn Page for more React & JavaScript growth tips. #JavaScript #ReactJS #ES6 #FrontendDeveloper #CodingJourney #WebDevelopment #JSFundamentals #TechLearning #CareerGrowth #CodeTips

Today I implemented a Mount Timer using React class components to better understand how lifecycle methods behave during state changes. What this component does: Initializes state with seconds and a dynamic count threshold Uses componentDidMount() to start a setInterval timer that increments every second Uses componentDidUpdate() to detect when seconds reaches the current threshold and automatically updates the next milestone (5s → 10s → 15s…) Cleans up the interval in componentWillUnmount() to prevent memory leaks Demonstrates how continuous state updates trigger re-render cycles Why I built this: To get hands-on clarity on how React handles: Mounting vs. Updating phases State mutation inside lifecycle methods Cleanup logic Re-render behavior and async state updates Attached video shows: ->The full source code -> Step-by-step output -> Lifecycle events in real-time Always sharpening fundamentals — React is powerful when you deeply understand its lifecycle. Trainer : Ms. Meghana Meghana M 10000 Coders #ReactJS #JavaScript #FrontendEngineering #TechLearning #WebDevelopment #CleanCode

𝐍𝐨𝐝𝐞.𝐣𝐬 𝐁𝐞𝐬𝐭 𝐏𝐫𝐚𝐜𝐭𝐢𝐜𝐞𝐬 𝐃𝐨’𝐬 & 𝐃𝐨𝐧’𝐭𝐬 In modern JavaScript development, writing clean and efficient async code is crucial for scalability and performance. ✅ The correct way is to use async/await inside functions, ensuring proper error handling and execution flow. ❌ A common mistake developers make is using forEach with async/await. Since forEach doesn’t wait for promises to resolve, it often leads to unexpected behavior. Instead, consider using for...of loops or Promise.all when working with async operations in arrays. 𝐈 𝐛𝐞𝐥𝐢𝐞𝐯𝐞 𝐦𝐚𝐬𝐭𝐞𝐫𝐢𝐧𝐠 𝐭𝐡𝐞𝐬𝐞 𝐬𝐦𝐚𝐥𝐥 𝐝𝐞𝐭𝐚𝐢𝐥𝐬 𝐦𝐚𝐤𝐞𝐬 𝐚 𝐛𝐢𝐠 𝐝𝐢𝐟𝐟𝐞𝐫𝐞𝐧𝐜𝐞 𝐢𝐧 𝐛𝐮𝐢𝐥𝐝𝐢𝐧𝐠 𝐫𝐞𝐥𝐢𝐚𝐛𝐥𝐞 𝐚𝐧𝐝 𝐩𝐫𝐨𝐝𝐮𝐜𝐭𝐢𝐨𝐧 𝐫𝐞𝐚𝐝𝐲 𝐍𝐨𝐝𝐞.𝐣𝐬 𝐚𝐩𝐩𝐥𝐢𝐜𝐚𝐭𝐢𝐨𝐧𝐬. #Nodejs #JavaScript #Programming #CleanCode #BinteHawa

🚀 𝗧𝗼𝗱𝗮𝘆’𝘀 𝗗𝗲𝗯𝘂𝗴𝗴𝗶𝗻𝗴 𝗝𝗼𝘂𝗿𝗻𝗲𝘆 𝗶𝗻 𝗠𝘆 𝗖𝗮𝗿 𝗥𝗲𝗻𝘁𝗮𝗹 𝗣𝗿𝗼𝗷𝗲𝗰𝘁! Today, I dove deep into debugging both the 𝗙𝗿𝗼𝗻𝘁𝗲𝗻𝗱 and 𝗯𝗮𝗰𝗸𝗲𝗻𝗱 𝗼𝗳 𝗺𝘆 𝗖𝗮𝗿 𝗥𝗲𝗻𝘁𝗮𝗹 𝗔𝗽𝗽𝗹𝗶𝗰𝗮𝘁𝗶𝗼𝗻, and it turned into a great learning experience for any .𝗡𝗘𝗧 and 𝗔𝗻𝗴𝘂𝗹𝗮𝗿 developer out there! 💻 On the frontend, I was handling 𝗶𝗺𝗮𝗴𝗲 𝘂𝗽𝗹𝗼𝗮𝗱𝘀, 𝗿𝗲𝗮𝗰𝘁𝗶𝘃𝗲 𝗳𝗼𝗿𝗺𝘀, 𝗮𝗻𝗱 𝗻𝗮𝘃𝗶𝗴𝗮𝘁𝗶𝗼𝗻 𝘀𝘁𝗮𝘁𝗲 in Angular — making sure that when a user edits their profile, all data (including uploaded images) flows perfectly into the update form. ⚙️ On the 𝗯𝗮𝗰𝗸𝗲𝗻𝗱 (.𝗡𝗘𝗧 𝗖𝗼𝗿𝗲) side, I debugged an issue where the 𝗔𝗣𝗜 𝗲𝗻𝗱𝗽𝗼𝗶𝗻𝘁 𝗿𝗲𝘁𝘂𝗿𝗻𝗲𝗱 𝗮 𝟰𝟬𝟰 (𝗡𝗼𝘁 𝗙𝗼𝘂𝗻𝗱) even though everything seemed fine in Swagger. The culprit? A 𝗿𝗼𝘂𝘁𝗲 𝗺𝗶𝘀𝗺𝗮𝘁𝗰𝗵 between Angular and the controller route in C#. Once aligned, everything synced beautifully — data flowed smoothly and updates started working perfectly! 🔍 This journey reminded me that debugging isn’t just fixing errors — it’s about 𝘂𝗻𝗱𝗲𝗿𝘀𝘁𝗮𝗻𝗱𝗶𝗻𝗴 𝗵𝗼𝘄 𝗲𝗮𝗰𝗵 𝗹𝗮𝘆𝗲𝗿 𝗰𝗼𝗺𝗺𝘂𝗻𝗶𝗰𝗮𝘁𝗲𝘀, from 𝗔𝗻𝗴𝘂𝗹𝗮𝗿 𝘀𝗲𝗿𝘃𝗶𝗰𝗲𝘀 → 𝗔𝗣𝗜 𝗿𝗼𝘂𝘁𝗲𝘀 → 𝗗𝗧𝗢𝘀 → 𝗱𝗮𝘁𝗮𝗯𝗮𝘀𝗲. When these layers align, even the toughest bugs melt away. 💡 𝗣𝗿𝗼 𝗧𝗶𝗽 𝗳𝗼𝗿 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗲𝗿𝘀: Always verify your 𝗔𝗣𝗜 𝗿𝗼𝘂𝘁𝗲𝘀, 𝗛𝗧𝗧𝗣 𝘃𝗲𝗿𝗯𝘀 (𝗣𝗢𝗦𝗧, 𝗣𝗨𝗧, 𝗲𝘁𝗰.), and 𝗙𝗼𝗿𝗺𝗗𝗮𝘁𝗮 𝗳𝗶𝗲𝗹𝗱 𝗻𝗮𝗺𝗲𝘀. 90% of “mystery bugs” hide in small mismatches. 👨💻 Whether you’re a .𝗡𝗘𝗧 𝗹𝗲𝗮𝗿𝗻𝗲𝗿, 𝗮 𝗳𝗿𝗼𝗻𝘁-𝗲𝗻𝗱 𝗱𝗲𝘃𝗲𝗹𝗼𝗽𝗲𝗿, an 𝗜𝗧 𝗰𝗼𝗻𝘀𝘂𝗹𝘁𝗮𝗻𝘁, or an 𝗛𝗥 𝗽𝗿𝗼𝗳𝗲𝘀𝘀𝗶𝗼𝗻𝗮𝗹 exploring project workflows — debugging teaches teamwork between code and logic! #️⃣ #DotNet #Angular #Debugging #FullStackDevelopment #WebDevelopment #LearningInPublic #CSharp #SoftwareEngineering #CodeJourney #DeveloperCommunity #ProblemSolving #CarRentalApp