Redux: React Native میں حالت کے انتظام کا نمونہ
Redux JavaScript ایپلیکیشنز کے لیے ایک پیش قیاسی حالت کے انتظام کا کنٹینر ہے، جسے Dan Abramov نے 2015 میں بنایا۔ Redux Flux آرکیٹیکچر پر مبنی یک طرفہ ڈیٹا بہاؤ کو نافذ کرتا ہے: حالت ایک ہی Store میں محفوظ ہوتی ہے، صرف خالص Reducer فنکشنز کے ذریعے تبدیل ہوتی ہے اور Dispatch کے ساتھ Action کے ذریعے شروع کی جاتی ہے۔ npm Trends کے مطابق، Redux ہفتہ وار 7 ملین سے زیادہ ڈاؤن لوڈ برقرار رکھتا ہے، React Native اور ویب ایپلیکیشنز میں حالت کے انتظام کا معیار بنا ہوا ہے۔
اہم نکات
- Store — سچائی کا واحد ذریعہ، پورے ایپلیکیشن حالت کے درخت کو محفوظ کرتا ہے
- Action — type فیلڈ والا آبجیکٹ، حالت تبدیل کرنے کی نیت بیان کرتا ہے
- Reducer — خالص فنکشن (prevState, action) => newState بغیر مضر اثرات کے
- Dispatch — Action کو Reducer میں بھیجنے کا Store طریقہ
- Middleware — غیر موافق کارروائیوں اور لاگنگ کے لیے dispatch اور reducer کے درمیان پرت
Redux کیا ہے؟
Redux ایک آرکیٹیکچرل پیٹرن اور حالت کے انتظام کی لائبریری ہے، جو تین اصولوں پر مبنی ہے: سچائی کا واحد ذریعہ، صرف پڑھنے کے لیے حالت، اور خالص فنکشنز کے ذریعے تبدیلیاں۔ MVC کے برعکس، جہاں ماڈل غیر متوقع طور پر حالت تبدیل کر سکتا ہے، Redux تعینیت کی ضمانت دیتا ہے: ایک جیسے ان پٹ ڈیٹا کے ساتھ، نتیجہ ہمیشہ ایک جیسا ہوتا ہے۔
Redux Facebook کے Flux آرکیٹیکچر اور Elm زبان سے متاثر تھا۔ Flux سے بنیادی فرق ایک سے زیادہ کے بجائے ایک ہی Store ہے۔ Redux میں، تمام ایپلیکیشن حالت — آبجیکٹ، arrays، لوڈنگ فلیگ — ایک ہی درخت میں محفوظ ہوتی ہے۔ یہ ڈیبگنگ، ٹیسٹنگ اور ٹائم ٹریول ڈیبگنگ کو آسان بناتا ہے۔ ڈیولپر پورا Store محفوظ کر سکتا ہے، Action کی ترتیب کو دہرا سکتا ہے اور دیکھ سکتا ہے کہ ہر مرحلے پر حالت کیسے تبدیل ہوئی۔
State of JS 2025 سروے کے مطابق، حالت کا انتظام استعمال کرنے والے 68% جواب دہندگان Redux یا Redux Toolkit کا انتخاب کرتے ہیں۔ یہ ٹول تمام جدید فریم ورکس کے ذریعے تعاون یافتہ ہے: React، React Native، Angular، Vue اور یہاں تک کہ فریم ورک کے بغیر ونیلا JavaScript۔
یک طرفہ ڈیٹا بہاؤ
یک طرفہ ڈیٹا بہاؤ Redux کا کلیدی اصول ہے، جہاں ڈیٹا سختی سے ایک سمت میں حرکت کرتا ہے: View → Action → Dispatch → Reducer → Store → View۔ کوئی بھی جزو Store کو براہ راست تبدیل نہیں کر سکتا۔ View صرف useSelector یا connect کے ذریعے تبدیلیوں کو سبسکرائب کرتی ہے اور dispatch کے ذریعے تبدیلیاں شروع کرتی ہے۔
Redux ورک فلو سائیکل: صارف بٹن دباتا ہے → جزو dispatch({ type: 'INCREMENT' }) کال کرتا ہے → Store Action کو Root Reducer کو بھیجتا ہے → Reducer نئی حالت کا حساب لگاتا ہے → Store سبسکرائبرز کو مطلع کرتا ہے → View نئے ڈیٹا کے ساتھ دوبارہ رینڈر ہوتی ہے۔ یہ سائیکل اس بات کی ضمانت دیتا ہے کہ ہر تبدیلی کا ایک مخصوص Action کی شکل میں واضح سبب ہو۔
DevTools — ہر Action، Store حالت اور عملدرآمد کے وقت کی نگرانی کے لیے Redux میں شامل ٹول۔ ڈیولپر تمام بھیجے گئے Action کی فہرست، پہلے اور بعد کی حالت کا فرق (diff) دیکھتا ہے، اور کسی بھی پچھلی حالت پر واپس جا سکتا ہے۔ یہ پیچیدہ حالتوں کی ڈیبگنگ کو روایتی لاگنگ کے مقابلے میں کئی گنا تیز تر بناتا ہے۔
Redux کے اہم اجزاء
Store — ایک آبجیکٹ جو مکمل ایپلیکیشن حالت کا درخت رکھتا ہے۔ configureStore (RTK) یا createStore کے ذریعے بنایا جاتا ہے۔ Store تین طریقے فراہم کرتا ہے: getState() پڑھنے کے لیے، dispatch(action) تبدیل کرنے کے لیے اور subscribe(listener) سبسکرائب کرنے کے لیے۔ Redux Toolkit میں، Store پہلے سے middleware، DevTools اور سلائس سپورٹ شامل کرتا ہے۔
TypeScript
import { configureStore } from '@reduxjs/toolkit'
interface CounterState {
value: number
}
const initialState: CounterState = { value: 0 }
function counterReducer(
state = initialState,
action: { type: string }
): CounterState {
switch (action.type) {
case 'INCREMENT':
return { value: state.value + 1 }
default:
return state
}
}
const store = configureStore({ reducer: counterReducer })
store.dispatch({ type: 'INCREMENT' })
console.log(store.getState()) // { value: 1 }Action اور Action Creator — Action ایک آبجیکٹ ہے جس میں لازمی type فیلڈ (ایک سٹرنگ مستقل) اور اختیاری payload (ڈیٹا) ہوتا ہے۔ Action Creator ایک فنکشن ہے جو Action لوٹاتا ہے۔ Redux Toolkit میں، خودکار ٹائپنگ کے ساتھ Action بنانے کے لیے createAction استعمال کیا جاتا ہے۔
Reducer — ایک خالص فنکشن جو موجودہ حالت اور Action وصول کرتا ہے، نئی حالت لوٹاتا ہے۔ Reducer کو نہیں کرنا چاہیے: حالت کو تبدیل کرنا (نیا آبجیکٹ لوٹایا جاتا ہے)، API کال کرنا، بے ترتیب نمبر بنانا یا Date تک رسائی حاصل کرنا۔ ناقابل تغیریت پھیلاؤ آپریٹر ... یا Immer (RTK میں شامل) کے ذریعے یقینی بنائی جاتی ہے۔
| جزو | ذمہ داری | پابندیاں |
|---|---|---|
| Store | حالت، dispatch، subscribe کا ذخیرہ | فی ایپلیکیشن ایک |
| Action | حالت تبدیل کرنے کی نیت کی وضاحت | type ہونا ضروری ہے |
| Reducer | نئی حالت کا حساب | خالص فنکشن، بغیر مضر اثرات |
| Dispatch | Action کو Reducer میں بھیجنا | بطور ڈیفالٹ ہم وقت |
| Selector | Store سے ڈیٹا نکالنا | createSelector کے ذریعے میموائزیشن |
Middleware اور Redux Thunk
Middleware فنکشنز کی ایک زنجیر ہے جو dispatch کال اور Action کے Reducer تک پہنچنے کے درمیان ڈالی جاتی ہے۔ ہر middleware Store API وصول کرتا ہے اور Action کو لاگ، تبدیل، تاخیر یا منسوخ کر سکتا ہے۔ Redux Thunk غیر موافق کارروائیوں کے لیے معیاری middleware ہے، جو آبجیکٹ کے بجائے فنکشن dispatch کرنے کی اجازت دیتا ہے۔
JavaScript
import { createAsyncThunk } from '@reduxjs/toolkit'
export const fetchUser = createAsyncThunk(
'users/fetchById',
async (userId: number, { rejectWithValue }) => {
const response = await fetch(`/api/users/${userId}`)
if (!response.ok)
return rejectWithValue('Failed to fetch')
return await response.json()
}
)مشہور middleware: Redux Thunk — سادہ غیر موافق کالز کے لیے، Redux Saga — جنریٹر ساگا کے ساتھ پیچیدہ منظرناموں کے لیے (debounce، race، متوازی درخواستیں)، Redux Observable — ری ایکٹیو سٹریمز کے لیے RxJS پر مبنی۔ Redux Toolkit میں، middleware configureStore میں middleware پیرامیٹر کے ذریعے جڑتا ہے۔
State of JS 2025 سروے کے مطابق، Thunk 72% Redux پروجیکٹس میں، Saga 18% میں اور Observable 5% میں استعمال ہوتا ہے۔ زیادہ تر ایپلیکیشنز کے لیے، Thunk + RTK Query کا مجموعہ غیر موافق ڈیٹا ورک فلو کے 95% کو کور کرنے کے لیے کافی ہے۔
Redux Toolkit اور RTK Query
Redux Toolkit (RTK) Redux منطق لکھنے کا سرکاری، تجویز کردہ طریقہ ہے، جو 2019 میں جاری کیا گیا۔ RTK میں configureStore، createSlice، createAsyncThunk اور createEntityAdapter شامل ہیں، جو Redux کے boilerplate کو 60-70% کم کرتا ہے۔ دستی طور پر Action Creator، Reducer اور اقسام بنانے کے بجائے، ایک ہی createSlice استعمال کیا جاتا ہے۔
TypeScript
import { createSlice, PayloadAction } from '@reduxjs/toolkit'
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
increment(state) { state.value += 1 },
incrementByAmount(state, action: PayloadAction<number>) {
state.value += action.payload
}
}
})
export const { increment, incrementByAmount } = counterSlice.actions
export default counterSlice.reducerRTK Query Redux Toolkit پر مبنی APIs کے ساتھ کام کرنے کے لیے ایک شامل حل ہے۔ یہ createApi کے ذریعے اعلانیہ طور پر اینڈ پوائنٹس کی وضاحت کرنے کی اجازت دیتا ہے جس میں خودکار ہک جنریشن، کیشنگ، ٹیگ کو کالعدم کرنا اور پر امید اپ ڈیٹس شامل ہیں۔ RTK Query ہر API درخواست کے لیے دستی Thunk، Reducer اور Selector لکھنے کی جگہ لے لیتا ہے۔
Entity Adapter — اداروں کے مجموعوں کو نارملائز کرنے کے لیے createEntityAdapter یوٹیلیٹی۔ آبجیکٹ arrays کے لیے شامل CRUD ریڈیوسرز، سلیکٹرز اور ترتیب فراہم کرتی ہے۔ اگر Store میں صارفین، مصنوعات یا آرڈر کی فہرستیں ہیں — تو Entity Adapter ریڈیوسر کوڈ کو 80% کم کر دیتا ہے۔
React Native میں Redux
React Native Redux JavaScript میں موبائل ایپلیکیشنز کے لیے معیاری اسٹیک ہے۔ Redux react-redux سے Provider کے ذریعے مربوط ہوتا ہے، جو روٹ ایپلیکیشن جزو کو لپیٹتا ہے۔ useSelector اور useDispatch ہکس اجزاء کو props drilling کے بغیر حالت تک رسائی دیتے ہیں۔ Persist — redux-persist Store کو AsyncStorage یا MMKV میں محفوظ کرتا ہے، ایپلیکیشن دوبارہ شروع کرنے کے بعد حالت بحال کرتا ہے۔
React Native کے لیے Middleware: Flipper کے ذریعے ڈیبگنگ کے لیے redux-flipper، مقامی ڈرائیوروں کے ساتھ ری ایکٹیو سٹریمز کے لیے redux-observable، تیز رفتار مستقل ذخیرہ کے لیے react-native-mmkv۔ نیویگیشن پلگ ان redux-first-router اسکرینوں کو Store سے جوڑتا ہے، واپسی پر اسکرین کی حالت بحال کرنے کی اجازت دیتا ہے۔
React Native میں، Redux نیٹ ورک فرسٹ حکمت عملی کے ساتھ استعمال ہوتا ہے: ایپ پہلے سرور سے ڈیٹا لوڈ کرنے کی کوشش کرتی ہے، پھر اسے RTK Query یا redux-persist کے ذریعے Store میں کیش کرتی ہے۔ آف لائن موڈ Redux + NetInfo + کنکشن بحال ہونے پر دوبارہ بھیجنے کے لیے Action قطار کے امتزاج سے حاصل کیا جاتا ہے۔
اکثر پوچھے گئے سوالات
Redux React کے Context API سے کیسے مختلف ہے؟
Redux Store، DevTools، Middleware اور ناقابل تغیر حالت کے ساتھ ایک مکمل خصوصیات والا حل ہے۔ Context API React میں props drilling کے بغیر ڈیٹا منتقل کرنے کا ایک شامل طریقہ کار ہے۔ Context عالمی تھیمز اور لوکلائزیشن کے لیے موزوں ہے، جبکہ Redux غیر موافق کارروائیوں، کیشنگ اور ڈیبگنگ کے ساتھ پیچیدہ حالت کے لیے ہے۔ بڑی ایپلیکیشنز میں، Context غیر ضروری دوبارہ رینڈرنگ کا سبب بنتا ہے، جبکہ سلیکٹرز کے ساتھ Redux اس مسئلے کو حل کرتا ہے۔
Redux Toolkit میں Immer کیا ہے؟
Immer ناقابل تغیر حالت کے انتظام کے لیے ایک لائبریری ہے، جو Redux Toolkit میں شامل ہے۔ Immer آپ کو ریڈیوسر لکھنے کی اجازت دیتا ہے جیسے آپ براہ راست حالت کو تبدیل کر رہے ہوں: state.value += 1۔ پردے کے پیچھے، Immer ایک پراکسی آبجیکٹ (draft) بناتا ہے، تبدیلیوں کو ٹریک کرتا ہے اور ایک نیا ناقابل تغیر آبجیکٹ لوٹاتا ہے۔ یہ ریڈیوسر کوڈ کے حجم کو 50% کم کرتا ہے اور حادثاتی تغیرات کو ختم کرتا ہے۔
Redux کی جانچ کیسے کریں؟
Redux منطق کو الگ تھلگ جانچا جاتا ہے: Reducer — ایک خالص فنکشن، بس مختلف Action کے ساتھ کال کریں اور نتیجہ چیک کریں۔ Action Creator — لوٹائے گئے آبجیکٹ کی تصدیق کریں۔ Thunk — API کو نقلی بنائیں، dispatch کال کریں اور چیک کریں کہ کون سے Action بھیجے گئے۔ useSelector والا جزو — رینڈرر میں ٹیسٹ Store کے ساتھ Provider استعمال کریں۔ Redux DevTools ایک حقیقی سیشن سے Action کی ترتیب دہرا کر ٹیسٹ لکھنے میں مدد کرتے ہیں۔
useState کے بجائے Redux کب استعمال کریں؟
useState ایک جزو کی مقامی حالت کے لیے کافی ہے: فیلڈ ٹیکسٹ، موڈل کھولنا/بند کرنا۔ Redux کی ضرورت ہے جب حالت کئی اسکرینوں کے درمیان مشترکہ ہو، غیر موافق ہم آہنگی (سرور سے ڈیٹا) کی ضرورت ہو، ایپلیکیشن دوبارہ شروع کرنے کے درمیان برقرار رہنی چاہیے (persist) یا ٹائم ٹریول ڈیبگنگ کی ضرورت ہو۔ چھوٹی ایپلیکیشنز کے لیے، Redux ضرورت سے زیادہ ہے — اس کے بجائے Context + useReducer استعمال کریں۔
Redux میں نارملائزیشن کیا ہے؟
Normalizr nested ڈیٹا کو فلیٹ Store ساخت میں نارملائز کرنے کے لیے ایک لائبریری ہے۔ user.posts[0].comments جیسے گہرے آبجیکٹ محفوظ کرنے کے بجائے، نارملائزیشن ڈکشنریز بناتی ہے: entities.users، entities.posts، entities.comments ID کے حوالے سے۔ یہ ایک ہی ادارے کو ہر جگہ اپ ڈیٹ کرنا آسان بناتا ہے اور سلیکٹرز کو تیز کرتا ہے۔ Redux Toolkit پیچیدہ ماڈلز کے لیے نارملائزڈ ڈیٹا کی سفارش کرتا ہے۔
خلاصہ
- Redux — ایک Store اور خالص Reducer کے ساتھ پیش قیاسی حالت کا کنٹینر
- Action — type والا آبجیکٹ، Reducer — خالص فنکشن، Dispatch — بھیجنے کا طریقہ کار
- Redux Toolkit — createSlice، createAsyncThunk اور RTK Query کے ساتھ سرکاری API
- Middleware — غیر موافقیت کے لیے پرت: Thunk، Saga، Observable
- React Native آف لائن موڈ کے لیے Provider، useSelector اور redux-persist کے ذریعے مربوط ہوتا ہے
- DevTools — ہر Action کو دہرانے والا ٹائم ٹریول ڈیبگنگ
- Normalizr — موثر سلیکٹرز اور اپ ڈیٹس کے لیے ڈیٹا نارملائزیشن
ہم ایک موبائل ایپلیکیشن ٹرنکی تیار کریں گے
IT Sectr 2017 سے اسٹارٹ اپس اور کاروبار کے لیے iOS اور Android ایپلیکیشنز بناتا ہے۔ ہم آپ کو مشورہ دیں گے اور بہترین حل تجویز کریں گے۔
مزید پڑھیں