Redux و مفهوم استور مشترک در React
Redux یک کتابخانه برای مدیریت وضعیت (state) در برنامههای جاوااسکریپتی است که بهویژه با React ترکیب میشود. در پروژههای بزرگ که نیاز به مدیریت پیچیده وضعیتها در بخشهای مختلف اپلیکیشن دارند، استفاده از Redux به شما کمک میکند تا وضعیت برنامه را به طور مرکزی و قابل پیشبینی مدیریت کنید.
۱. چرا Redux؟
در اپلیکیشنهای بزرگ، با گذشت زمان، مدیریت وضعیت پیچیدهتر میشود. اگر وضعیت (state) را به طور پراکنده در کامپوننتها و لایههای مختلف نگهداری کنید، کد به هم ریخته، دشوار به نگهداری و تست خواهد شد.
🔹 Redux یک راهحل برای این مشکل ارائه میدهد. با استفاده از Redux میتوانیم وضعیتها را در یک استور (store) مرکزی ذخیره کرده و کامپوننتها به سادگی به این وضعیتها دسترسی پیدا کنند.
۲. مفهوم استور مشترک (Centralized Store) در Redux
استور (store) در Redux مرکزی است که تمام وضعیتهای اپلیکیشن در آن نگهداری میشود. این استور یک شیء جاوااسکریپتی است که در آن همه دادهها (state) ذخیره میشود و به تمامی کامپوننتها اجازه میدهد که وضعیت را از طریق dispatch
(فرستادن اعمال) و subscribe
(گوش دادن به تغییرات) مدیریت کنند.
🔹 مفهوم استور مشترک
- استور مشترک یعنی تمام دادههای وضعیت اپلیکیشن در یک مکان (استور مرکزی) ذخیره میشوند و از اینجا به تمامی بخشهای برنامه در دسترس قرار میگیرند.
- تمامی کامپوننتها میتوانند به استور مشترک متصل شوند و هر گونه تغییر در وضعیت به صورت خودکار تمام کامپوننتهای وابسته را بهروز میکند.
۳. اجزای اصلی Redux
-
استور (Store)
استور مرکزی برای نگهداری وضعیت (state) اپلیکیشن است. یک استور در هر برنامه Redux وجود دارد. -
اکشن (Action)
اکشنها اشیائی هستند که یک نوع رویداد را تعریف میکنند و میتوانند دادههای لازم برای تغییر وضعیت را در خود داشته باشند. اکشنها معمولا با یک نوع (type) و داده (payload) مشخص میشوند. -
ردیوسر (Reducer)
ردوسرها مسئول مدیریت و بهروزرسانی وضعیت در استور هستند. هر ردوسر یک تابع است که وضعیت فعلی و اکشن دریافتی را میگیرد و وضعیت جدید را برمیگرداند. -
دیسبچ (Dispatch)
متدdispatch
به ما این امکان را میدهد که اکشنها را به استور ارسال کنیم تا وضعیت بهروزرسانی شود. -
سبسکرایب (Subscribe)
از متدsubscribe
برای گوش دادن به تغییرات وضعیت استفاده میشود. هر بار که وضعیت تغییر میکند، این متد فراخوانی میشود.
۴. مراحل استفاده از Redux
مرحله ۱: نصب Redux و React-Redux
برای استفاده از Redux در پروژه React ابتدا باید دو بسته redux
و react-redux
را نصب کنیم:
مرحله ۲: ایجاد استور (Store)
استور جایی است که وضعیت برنامه نگهداری میشود. در ابتدا باید یک استور برای برنامه خود بسازیم.
مثال: ایجاد استور
// ردوسر ساده
const reducer = (state = { counter: 0 }, action) => {
switch (action.type) {
case 'INCREMENT':
return { counter: state.counter + 1 };
default:
return state;
}
};
// ایجاد استور
const store = createStore(reducer);
export default store;
🔹 در این مثال، یک ردوسر داریم که وضعیت شمارنده (counter
) را مدیریت میکند و تنها یک نوع اکشن به نام INCREMENT
برای افزایش شمارنده داریم.
مرحله ۳: استفاده از Provider
برای اتصال استور به اپلیکیشن
برای استفاده از استور در هر کامپوننت، باید کامپوننت ریشه (root component) خود را با Provider
از react-redux
محاصره کنیم. Provider
استور را در دسترس تمام کامپوننتها قرار میدهد.
مثال: اتصال استور به اپلیکیشن
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store'; // استور ساخته شده
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
مرحله ۴: ارسال اکشن با dispatch
برای ارسال یک اکشن به استور، از متد dispatch
استفاده میکنیم. این اکشن باعث تغییر وضعیت (state) در استور خواهد شد.
مثال: ارسال اکشن
import { useDispatch } from 'react-redux';
const IncrementButton = () => {
const dispatch = useDispatch(); // گرفتن متد dispatch
const increment = () => {
dispatch({ type: 'INCREMENT' }); // ارسال اکشن به استور
};
return <button onClick={increment}>افزایش شمارنده</button>;
};
export default IncrementButton;
✅ هر بار که دکمه فشرده شود، اکشن INCREMENT
به استور ارسال شده و شمارنده افزایش مییابد.
مرحله ۵: خواندن وضعیت با useSelector
برای دسترسی به وضعیت استور، از هوک useSelector
استفاده میکنیم. این هوک به ما امکان میدهد که بخشی از وضعیت را از استور استخراج کنیم.
مثال: خواندن وضعیت
import { useSelector } from 'react-redux';
const Counter = () => {
const counter = useSelector(state => state.counter); // خواندن وضعیت از استور
return <h1>شمارنده: {counter}</h1>;
};
export default Counter;
✅ useSelector
به کامپوننت اجازه میدهد که وضعیت شمارنده را از استور بگیرد و در رابط کاربری نمایش دهد.
۶. مفهوم استور مشترک در Redux
با استفاده از استور مشترک در Redux، وضعیت اپلیکیشن به طور مرکزی در یک مکان نگهداری میشود و هر کامپوننت میتواند به این دادهها دسترسی داشته باشد. این روش باعث میشود که مدیریت وضعیت به شکل یکپارچه و قابل پیشبینی انجام شود و کد سادهتر و مقیاسپذیرتر باشد.
جمعبندی
✅ Redux یک ابزار قوی برای مدیریت وضعیت در اپلیکیشنهای پیچیده است که به شما کمک میکند وضعیت را در یک استور مشترک ذخیره کرده و بهراحتی آن را در سطح اپلیکیشن به اشتراک بگذارید.
✅ با استفاده از Provider
، استور را به کامپوننتها میدهیم، با dispatch
اکشنها را ارسال میکنیم و با useSelector
وضعیت را از استور میخوانیم.
✅ استفاده از استور مشترک باعث میشود که کد شما خواناتر و مقیاسپذیرتر شود.
