مفهوم Redux در React.js

Redux یک کتابخانه مدیریت حالت (state management) است که به شما کمک می‌کند تا وضعیت برنامه‌های React.js را به صورت پیش‌بینی‌پذیر و متمرکز مدیریت کنید. این کتابخانه بر پایه اصول معماری Flux طراحی شده و برای برنامه‌هایی با وضعیت پیچیده یا اشتراک‌گذاری داده‌ها بین کامپوننت‌ها مفید است.

اصول اصلی Redux

یک منبع حقیقت (Single Source of Truth):
تمام وضعیت برنامه در یک store متمرکز ذخیره می‌شود که یک جا برای نگهداری همه داده‌ها فراهم می‌کند.

حالت فقط خواندنی است (State is Read-Only):
وضعیت نمی‌تواند مستقیماً تغییر کند. تنها راه تغییر وضعیت، ارسال یک action است.

تغییرات با توابع خالص (Reducers) انجام می‌شود:
تغییر وضعیت از طریق توابع خالصی به نام reducer انجام می‌شود که ورودی آن وضعیت فعلی و اکشن است و یک وضعیت جدید را برمی‌گرداند.

چرا Redux در React استفاده می‌شود؟

مدیریت پیچیدگی حالت:
Redux کمک می‌کند تا مدیریت وضعیت در برنامه‌های بزرگ ساده‌تر شود.

اشتراک‌گذاری داده‌ها:
زمانی که نیاز به اشتراک‌گذاری داده‌ها بین چندین کامپوننت باشد، Redux این کار را با سهولت انجام می‌دهد.

پیش‌بینی‌پذیری:
به دلیل اصول و ساختار ساده Redux، تغییرات وضعیت کاملاً قابل پیش‌بینی و دیباگ هستند.

ابزارهای توسعه (DevTools):
Redux DevTools امکان مشاهده تاریخچه تغییرات و بازگردانی به وضعیت‌های قبلی را فراهم می‌کند.

مفاهیم کلیدی Redux

Store:
جایی که کل وضعیت برنامه ذخیره می‌شود.

Action:
یک شی ساده که نوع تغییر (type) و داده‌های لازم برای تغییر (payload) را مشخص می‌کند:

const action = { type: 'INCREMENT', payload: 1 };

Reducer:
تابعی خالص که وضعیت فعلی و اکشن را دریافت کرده و وضعیت جدید را بازمی‌گرداند:

const reducer = (state = { count: 0 }, action) => {
switch (action.type) {
case 'INCREMENT':
return { ...state, count: state.count + action.payload };
default:
return state;
}};

Dispatch:
متدی که برای ارسال یک اکشن به استور استفاده می‌شود:

store.dispatch({ type: 'INCREMENT', payload: 1 });

Selector:
برای استخراج داده‌های خاص از وضعیت استفاده می‌شود.

نحوه استفاده Redux در React

نصب Redux و React-Redux:

npm install redux react-redux

ساخت استور:

import { createStore } from 'redux'; const store = createStore(reducer);

اتصال React به Redux: از کامپوننت <Provider> برای ارائه استور به کل برنامه استفاده می‌شود:

import { Provider } from 'react-redux';
<Provider store={store}>
    <App />
</Provider>;

اتصال کامپوننت‌ها: با استفاده از useSelector و useDispatch در کامپوننت‌ها به وضعیت و اکشن‌ها دسترسی پیدا می‌کنید:

import { useSelector, useDispatch } from 'react-redux';

const Counter = () => {
    const count = useSelector(state => state.count);
    const dispatch = useDispatch();

    return (
        <div>
            <h1>{count}</h1>
            <button onClick={() => dispatch({ type: 'INCREMENT', payload: 1 })}>Increment</button>
        </div>
    );
};

Redux Toolkit

برای ساده‌تر کردن استفاده از Redux، Redux Toolkit معرفی شده که ابزارها و امکانات پیشرفته‌تری مثل ساده‌سازی reducerها و مدیریت وضعیت را فراهم می‌کند. برای استفاده از آن:

npm install @reduxjs/toolkit

چه زمانی Redux استفاده کنیم؟

Redux زمانی مناسب است که:

برنامه شما پیچیده باشد و حالت‌های زیادی را مدیریت کند.

نیاز به اشتراک‌گذاری داده بین کامپوننت‌های زیادی وجود داشته باشد.

نیاز به تاریخچه وضعیت یا دیباگ ساده باشد.