\n
\u00a0<\/span>
\n<\/span>\u00a0 <\/span>App<\/span> \u2192 <\/span>Dashboard<\/span> \u2192 <\/span>Sidebar<\/span> \u2192 <\/span>UserProfile<\/span><\/p>\n<\/div>\n <\/p>\n
Suppose the <\/span>UserProfile <\/b>component needs user data.<\/span><\/p>\nWithout Redux, we may need to pass props through multiple components even when intermediate components do not use that data.<\/span><\/p>\nThis problem is called:<\/span><\/p>\nProp Drilling<\/b><\/h3>\n
Prop drilling makes:<\/span><\/p>\n\n- Code difficult to maintain<\/span><\/li>\n
- Components tightly coupled<\/span><\/li>\n
- Debugging harder<\/span><\/li>\n<\/ul>\n
Redux solves this problem by storing shared data in a global store.<\/span><\/p>\nAny component can directly access the required data without passing props manually.<\/span><\/p>\nReact Redux Architecture<\/b><\/h3>\n
Redux follows a simple one-way data flow.<\/span><\/p>\n![\"\"](\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2026\/09\/image-60-300x150.png\")
<\/p>\n
Explanation<\/b><\/h2>\n
<\/p>\n
1. Component<\/b><\/h3>\n
User interacts with the UI.<\/span><\/p>\n2. Dispatch<\/b><\/h3>\n
Component sends an action using dispatch.<\/span><\/p>\nExample:<\/span><\/p>\ndispatch(increment())<\/span><\/p>\n3. Reducer<\/b><\/h3>\n
Reducer updates the state based on the action.<\/span><\/p>\n4. Store<\/b><\/h3>\n
Store keeps the updated application state.<\/span><\/p>\n5. UI Update<\/b><\/h3>\n
Components automatically receive updated data using <\/span>useSelector()<\/span>.<\/span><\/p>\n <\/p>\n
Recommended Folder Structure<\/b><\/h3>\n
A simple Redux Toolkit folder structure:<\/span><\/p>\nsrc\/<\/span><\/p>\n\u00a0\u251c\u2500\u2500 redux\/<\/span><\/p>\n\u00a0\u2502\u00a0 \u00a0 \u251c\u2500\u2500 store.js<\/span><\/p>\n\u00a0\u2502\u00a0 \u00a0 \u2514\u2500\u2500 counterSlice.js<\/span><\/p>\n\u00a0\u2502<\/span><\/p>\n\u00a0\u251c\u2500\u2500 components\/<\/span><\/p>\n\u00a0\u2502\u00a0 \u00a0 \u2514\u2500\u2500 Counter.jsx<\/span><\/p>\n\u00a0\u2502<\/span><\/p>\n\u00a0\u251c\u2500\u2500 App.jsx<\/span><\/p>\n\u00a0\u2514\u2500\u2500 main.jsx<\/span><\/p>\nFolder Explanation<\/b><\/h2>\n\n\n\n| File<\/b><\/td>\n | Purpose<\/b><\/td>\n<\/tr>\n\n| store.js<\/span><\/td>\n | Creates Redux store<\/span><\/td>\n<\/tr>\n\n| counterSlice.js<\/span><\/td>\n | Contains state, reducers, and actions<\/span><\/td>\n<\/tr>\n\n| Counter.jsx<\/span><\/td>\n | React component using Redux<\/span><\/td>\n<\/tr>\n\n| main.jsx<\/span><\/td>\n | Connects Redux with React using Provider<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n <\/p>\n Redux Example using useDispatch and useSelector<\/b><\/h3>\n<\/h2>\nStep 1: Install Redux Toolkit<\/b><\/h3>\n\n \u00a0\u00a0\u00a0<\/span>npm<\/span> install<\/span> @<\/span>reduxjs<\/span>\/<\/span>toolkit<\/span> react<\/span>–<\/span>redux<\/span><\/p>\n<\/div>\n <\/p>\n Step 2: Create counterSlice.js<\/b><\/h3>\n\n \u00a0import<\/span> { <\/span>createSlice<\/span> } <\/span>from<\/span> “@reduxjs\/toolkit”<\/span>;<\/span>\u00a0const<\/span> counterSlice<\/span> = <\/span>createSlice<\/span>({<\/span><\/p>\n\u00a0\u00a0<\/span>name:<\/span> “counter”<\/span>,<\/span><\/p>\n\u00a0\u00a0<\/span>initialState:<\/span> {<\/span><\/p>\n\u00a0\u00a0\u00a0\u00a0<\/span>count:<\/span> 0<\/span>,<\/span><\/p>\n\u00a0\u00a0},<\/span><\/p>\n\u00a0\u00a0<\/span>reducers:<\/span> {<\/span><\/p>\n\u00a0\u00a0\u00a0\u00a0<\/span>increment<\/span>:<\/span> (<\/span>state<\/span>) <\/span>=><\/span> {<\/span><\/p>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>state<\/span>.<\/span>count<\/span> += <\/span>1<\/span>;<\/span><\/p>\n\u00a0\u00a0\u00a0\u00a0},<\/span><\/p>\n\u00a0\u00a0\u00a0\u00a0<\/span>decrement<\/span>:<\/span> (<\/span>state<\/span>) <\/span>=><\/span> {<\/span><\/p>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>state<\/span>.<\/span>count<\/span> -= <\/span>1<\/span>;<\/span><\/p>\n\u00a0\u00a0\u00a0\u00a0},<\/span><\/p>\n\u00a0\u00a0},<\/span><\/p>\n\u00a0});<\/span><\/p>\n\u00a0export<\/span> const<\/span> { <\/span>increment<\/span>, <\/span>decrement<\/span> } = <\/span>counterSlice<\/span>.<\/span>actions<\/span>;<\/span><\/p>\n\u00a0export<\/span> default<\/span> counterSlice<\/span>.<\/span>reducer<\/span>;<\/span><\/p>\n<\/div>\n <\/p>\n Step 3: Create store.js<\/b><\/h3>\n\n \u00a0import<\/span> { <\/span>configureStore<\/span> } <\/span>from<\/span> ‘@reduxjs\/toolkit’<\/span>\u00a0import<\/span> counterReducer<\/span> from<\/span> ‘.\/counterSlice’<\/span><\/p>\n\u00a0export<\/span> const<\/span> store<\/span> = <\/span>configureStore<\/span>({<\/span><\/p>\n\u00a0\u00a0\u00a0<\/span>reducer:<\/span> {<\/span><\/p>\n\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>counter:<\/span> counterReducer<\/span>,<\/span><\/p>\n | | | | |