"Understanding Redux Internals and Middleware with Rohit Negi Bhaiya"

🚀 React Day 21: Redux Internals + Middleware Deep Dive 💡 #WebDevelopment with Rohit Negi Bhaiya Continuing from Day 20, jaha humne Bitcoin API project banaya using Redux Toolkit, aaj humne ussi ki internal working of async Redux + middleware samjha 🔥 🔍 Key Learnings: 1️⃣ dispatch(fetchData(20)) => "fetchData is just a "function", not a direct an "action". ▪️Agar ye action hota, store ko type se pata chal jata kaunsa reducer run karna hai. ▪️Ab function dispatch ho raha hai, toh store directly handle nahi kar pa raha. 2️⃣ Middleware ka role: ▪️Middleware detect karta hai ki ye function hai aur ise call karwa deta hai. ▪️Without middleware, store ko samajh nahi aata ki kya karna hai. 3️⃣ createAsyncThunk automatically handles these three states: ▪️Pending (Loading) – jab API request start hoti hai ▪️Fulfilled (Resolved) – jab data successfully fetch ho jata hai ▪️Rejected (Error) – agar request fail ho jaye 4️⃣ ExtraReducers ka magic: ▪️Dispatch me slice name nahi diya, matlab multiple slices easily same data use kar sakte hain ▪️ExtraReducers me likhe cases automatically match hote hain type ke according aur state update kar dete hain 5️⃣ Why no slice name in dispatch? ▪️Agar slice name hota, sirf wo slice data receive karta ▪️agar multiple slices same data use karna ho, toh slice name na dena better hai 🧠 Simplified Concept: 🔹 Dispatching function = Store ko direct action nahi, bas function pass hota 🔹 Middleware = Detects function & calls it 🔹 createAsyncThunk = Handles async states internally 🔹 ExtraReducers = Automatically updates state based on API status 📍 Next: "React Virtual DOM" 🙏 Special thanks to Rohit Negi Bhaiya for explaining Redux internals in such a simple way ❤️ #React #Redux #ReduxToolkit #Middleware #AsyncThunk #ReactJS #WebDevelopment #Frontend #JavaScript #ReactHooks #FrontendDeveloper #RohitNegi #CoderArmy #Nexus #TechCommunity

  • diagram

To view or add a comment, sign in

Explore content categories