Redux: الگوی مدیریت حالت در React Native
Redux — یک محفظه مدیریت حالت قابل پیشبینی برای برنامههای JavaScript است که توسط Dan Abramov در سال 2015 ایجاد شد. Redux جریان داده یکطرفه را بر اساس معماری Flux پیادهسازی میکند: حالت در یک Store واحد ذخیره میشود، فقط از طریق توابع خالص Reducer تغییر میکند و از طریق Action با Dispatch آغاز میشود. بر اساس دادههای npm Trends، Redux بیش از 7 میلیون دانلود هفتگی را حفظ کرده و استانداردی برای مدیریت حالت در React Native و برنامههای وب باقی مانده است.
نکات اصلی
- Store — تنها منبع حقیقت، ذخیرهکننده کل درخت حالت برنامه
- Action — شی با فیلد type که قصد تغییر حالت را توصیف میکند
- Reducer — تابع خالص (prevState, action) => newState بدون عوارض جانبی
- Dispatch — روش Store برای ارسال Action به Reducer
- Middleware — لایه میانی بین dispatch و reducer برای عملیات ناهمگام و ثبت رویدادها
Redux چیست؟
Redux — یک الگوی معماری و کتابخانه برای مدیریت حالت است که بر سه اصل استوار است: تنها منبع حقیقت (single source of truth)، حالت فقط خواندنی (read-only) و تغییرات از طریق توابع خالص. بر خلاف MVC که در آن مدل میتواند حالت را به طور غیرقابل پیشبینی تغییر دهد، Redux قطعیت را تضمین میکند: با دادههای ورودی یکسان، نتیجه همیشه یکسان است.
Redux از معماری Flux متعلق به Facebook و زبان Elm الهام گرفته است. تفاوت اصلی با Flux — یک Store واحد به جای چندین Store. در Redux تمام حالت برنامه — اشیا، آرایهها، پرچمهای بارگذاری — در یک درخت ذخیره میشود. این کار اشکالزدایی، آزمایش و بازیابی حالت (time-travel debugging) را ساده میکند. توسعهدهنده میتواند کل Store را ذخیره کند، توالی Action را بازتولید کند و ببیند حالت در هر مرحله چگونه تغییر کرده است.
بر اساس دادههای State of JS 2025، 68% از پاسخدهندگانی که از مدیریت حالت استفاده میکنند، Redux یا Redux Toolkit را انتخاب میکنند. این ابزار توسط تمام فریمورکهای مدرن پشتیبانی میشود: React، React Native، Angular، Vue و حتی JavaScript خالص بدون فریمورک.
جریان داده یکطرفه
Unidirectional data flow — اصل کلیدی 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 — ابزار داخلی Redux برای نظارت بر هر Action، حالت Store و زمان اجرا. توسعهدهنده لیست تمام Actionهای ارسال شده، تفاوت حالت (diff) قبل و بعد را میبیند و میتواند به هر حالت قبلی بازگردد. این کار اشکالزدایی حالتهای پیچیده را دهها برابر سریعتر از ثبت رویداد معمولی میکند.
اجزای کلیدی Redux
Store — شی حاوی درخت کامل حالت. از طریق configureStore (RTK) یا createStore ایجاد میشود. Store سه روش ارائه میدهد: getState() برای خواندن، dispatch(action) برای تغییر و subscribe(listener) برای اشتراک. در Redux Toolkit، Store قبلاً شامل middleware، DevTools و پشتیبانی از sliceها است.
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 از createAction برای تولید Action با تایپبندی خودکار استفاده میشود.
Reducer — تابع خالصی که حالت فعلی و Action را دریافت کرده و حالت جدید را برمیگرداند. Reducer نباید: state را تغییر دهد (شی جدید برمیگرداند)، API فراخوانی کند، اعداد تصادفی تولید کند یا به Date دسترسی پیدا کند. تغییرناپذیری توسط عملگر spread ... یا Immer (ساخته شده در RTK) تضمین میشود.
| کامپوننت | وظیفه | محدودیتها |
|---|---|---|
| Store | ذخیره حالت، dispatch، subscribe | یکی در هر برنامه |
| Action | توصیف قصد تغییر حالت | باید type داشته باشد |
| Reducer | محاسبه حالت جدید | تابع خالص، بدون عوارض جانبی |
| Dispatch | ارسال Action به Reducer | پیشفرض همگام |
| Selector | استخراج داده از Store | مموایزیشن از طریق createSelector |
Middleware و Redux Thunk
Middleware — زنجیرهای از توابع که بین فراخوانی dispatch و زمانی که Action به Reducer میرسد قرار میگیرد. هر middleware API Store را دریافت میکند و میتواند 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 — برای سناریوهای پیچیده با saga-ژنراتورها (debounce، race، درخواستهای موازی)، Redux Observable — مبتنی بر RxJS برای جریانهای واکنشی. در Redux Toolkit middleware از طریق پارامتر middleware در configureStore متصل میشود.
بر اساس نظرسنجی 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 را 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 — راهحل داخلی برای کار با API مبتنی بر Redux Toolkit. امکان تعریف نقاط پایانی به صورت اعلانی از طریق createApi با تولید خودکار hookها، کش کردن، باطلسازی برچسبها و بهروزرسانیهای خوشبینانه را فراهم میکند. RTK Query جایگزین نوشتن دستی Thunk، Reducer و Selector برای هر درخواست API میشود.
Entity Adapter — ابزار createEntityAdapter برای نرمالسازی مجموعههای موجودیت. reducerهای داخلی CRUD، selectorها و مرتبسازی برای آرایههای اشیا ارائه میدهد. اگر در Store لیست کاربران، محصولات یا سفارشها ذخیره میشود — Entity Adapter کد کاهش را 80% کاهش میدهد.
Redux در React Native
React Native Redux — ترکیب استاندارد برای برنامههای موبایل در JavaScript. Redux از طریق Provider از react-redux که کامپوننت ریشه برنامه را میپوشاند، یکپارچه میشود. Hookهای useSelector و useDispatch به کامپوننتها بدون props drilling دسترسی به حالت میدهند. Persist — redux-persist Store را در AsyncStorage یا MMKV ذخیره میکند و حالت را پس از راهاندازی مجدد برنامه بازیابی میکند.
Middleware برای React Native: redux-flipper برای اشکالزدایی از طریق Flipper، redux-observable برای جریانهای واکنشی با درایورهای بومی، react-native-mmkv برای ذخیرهسازی پایدار سریع. پلاگین ناوبری redux-first-router صفحهها را به Store متصل میکند و امکان بازیابی حالت صفحه را هنگام بازگشت فراهم میکند.
در React Native، Redux همراه با استراتژی network-first استفاده میشود: برنامه ابتدا سعی میکند دادهها را از سرور بارگذاری کند، سپس از طریق RTK Query یا redux-persist در Store کش میکند. حالت آفلاین با ترکیب Redux + NetInfo + صف Action برای ارسال مجدد هنگام بازیابی اتصال به دست میآید.
سوالات متداول
تفاوت Redux با Context API در React چیست؟
Redux — یک راهحل کامل با Store، DevTools، Middleware و حالت تغییرناپذیر است. Context API — مکانیزم داخلی React برای انتقال داده بدون props drilling است. Context برای تمهای سراسری و بومیسازی مناسب است، Redux — برای حالت پیچیده با عملیات ناهمگام، کش کردن و اشکالزدایی. در برنامههای بزرگ، Context باعث رندر مجدد اضافی میشود، Redux با selectorها این مشکل را حل میکند.
Immer در Redux Toolkit چیست؟
Immer — کتابخانهای برای کار تغییرناپذیر با حالت است که در Redux Toolkit تعبیه شده است. Immer به شما امکان میدهد reducerها را طوری بنویسید که گویی مستقیماً state را تغییر میدهید: state.value += 1. در پشت صحنه، Immer یک شی پراکسی (draft) ایجاد میکند، تغییرات را ردیابی میکند و یک شی تغییرناپذیر جدید برمیگرداند. این کار حجم کد reducerها را 50% کاهش میدهد و تغییرات تصادفی را از بین میبرد.
چگونه Redux را تست کنیم؟
منطق Redux به صورت ایزوله تست میشود: Reducer — تابع خالص، کافی است با Actionهای مختلف فراخوانی و نتیجه بررسی شود. Action Creator — شی برگشتی بررسی شود. Thunk — API را mock کنید، dispatch را فراخوانی کنید و ببینید کدام Actionها ارسال شدهاند. کامپوننت با useSelector — از Provider با Store آزمایشی در رندرر استفاده کنید. Redux DevTools با بازتولید توالی Action از یک جلسه واقعی به نوشتن تست کمک میکند.
چه زمانی به جای useState از Redux استفاده کنیم؟
useState برای حالت محلی یک کامپوننت کافی است: متن فیلد، باز/بسته بودن مودال. Redux زمانی نیاز است که حالت بین چندین صفحه به اشتراک گذاشته شود، نیاز به همگامسازی ناهمگام (داده از سرور) داشته باشد، باید بین راهاندازی مجدد برنامه حفظ شود (persist) یا نیاز به اشکالزدایی time-travel داشته باشد. برای برنامههای کوچک، Redux اضافی است — از Context + useReducer استفاده کنید.
normalize در Redux چیست؟
Normalizr — کتابخانهای برای نرمالسازی دادههای تو در تو به ساختار مسطح Store است. به جای ذخیره اشیای عمیق مانند user.posts[0].comments، نرمالسازی دیکشنریهایی ایجاد میکند: entities.users، entities.posts، entities.comments با ارجاع از طریق ID. این کار بهروزرسانی یک موجودیت را در همه مکانها ساده میکند و selectorها را سرعت میبخشد. Redux Toolkit دادههای نرمالسازی شده را برای مدلهای پیچیده توصیه میکند.
خلاصه
- Redux — محفظه حالت قابل پیشبینی با Store واحد و Reducerهای خالص
- Action — شی با type، Reducer — تابع خالص، Dispatch — مکانیزم ارسال
- Redux Toolkit — API رسمی با createSlice، createAsyncThunk و RTK Query
- Middleware — لایه میانی برای ناهمگامی: Thunk، Saga، Observable
- React Native از طریق Provider، useSelector و redux-persist برای حالت آفلاین یکپارچه میشود
- DevTools — اشکالزدایی time-travel با بازتولید هر Action
- Normalizr — نرمالسازی داده برای selectorها و بهروزرسانیهای کارآمد
ما یک اپلیکیشن موبایل به صورت کلید در دست توسعه خواهیم داد
IT Sectr از سال 2017 برنامههای iOS و Android را برای استارتاپها و کسبوکارها ایجاد میکند. ما به شما مشاوره میدهیم و بهترین راهحل را پیشنهاد خواهیم کرد.
همچنین بخوانید