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 را نصب کنیم:

npm install redux react-redux

مرحله ۲: ایجاد استور (Store)

استور جایی است که وضعیت برنامه نگهداری می‌شود. در ابتدا باید یک استور برای برنامه خود بسازیم.

مثال: ایجاد استور

import { createStore } from 'redux';

// ردوسر ساده

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 React from 'react';

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 React from 'react';

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 React from 'react';

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 وضعیت را از استور می‌خوانیم.
✅ استفاده از استور مشترک باعث می‌شود که کد شما خواناتر و مقیاس‌پذیرتر شود.