Redux | ریداکس یکی از محبوبترین کتابخانههای مدیریت وضعیت (state management) در برنامههای جاوااسکریپت است. این ابزار به شما کمک میکند که وضعیت برنامهتان را به صورت متمرکز مدیریت کنید و کدی تمیز، مقیاسپذیر و قابل نگهداری بنویسید. ریداکس معمولاً در کنار کتابخانههایی مانند React استفاده میشود، اما محدود به آن نیست و با هر فریمورکی که از جاوااسکریپت پشتیبانی کند، کار میکند.
اصول اصلی ریداکس
Redux بر اساس سه اصل اساسی طراحی شده است:
- یک منبع واحد برای وضعیت (Single Source of Truth):
تمام وضعیت برنامه در یک شی واحد ذخیره میشود که به آن “استور” (Store) میگویند. این اصل به شما کمک میکند وضعیت برنامه را به راحتی پیگیری کنید. - حالت فقط خواندنی (State is Read-Only):
وضعیت برنامه به صورت مستقیم تغییر نمیکند. برای اعمال تغییرات، باید از “اکشن”ها (Action) استفاده کنید. - تغییرات با فانکشنهای خالص انجام میشود (Changes are Made with Pure Functions):
تغییرات در وضعیت توسط توابع خالصی به نام “ردیوسر” (Reducer) انجام میشود. این توابع ورودی و خروجی مشخصی دارند و تغییرات را به صورت پیشبینیپذیر اعمال میکنند.
اجزای اصلی ریداکس
- استور (Store):
محلی که تمام وضعیت برنامه در آن ذخیره میشود. - اکشن (Action):
شیای که یک نوع (type) مشخص دارد و توضیح میدهد چه اتفاقی باید بیفتد. - ردیوسر (Reducer):
تابعی که وضعیت فعلی و اکشن را دریافت کرده و وضعیت جدید را بازمیگرداند. - میانافزار (Middleware):
ابزارهایی که به شما اجازه میدهند عملکردهای اضافی مانند مدیریت درخواستهای غیرهمزمان (async) را انجام دهید.
مرحله 1: نصب Redux Toolkit و React-Redux
برای شروع، ابتدا باید Redux Toolkit و React-Redux را در پروژه خود نصب کنید. این کار را میتوانید با دستور زیر انجام دهید:
bashCopy codenpm install @reduxjs/toolkit react-redux
مرحله 2: تنظیم استور (Store)
ابتدا یک فایل جدید با نام store.js
یا هر نام دلخواه ایجاد کنید. سپس از متد configureStore
برای ایجاد استور استفاده کنید:
javascriptCopy codeimport { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';
const store = configureStore({
reducer: {
counter: counterReducer,
},
});
export default store;
مرحله 3: ایجاد Slice
یک “Slice” ترکیبی از Reducer و Action است. برای مثال، میتوانید یک فایل جدید با نام counterSlice.js
ایجاد کرده و محتوای زیر را اضافه کنید:
javascriptCopy codeimport { createSlice } from '@reduxjs/toolkit';
const counterSlice = createSlice({
name: 'counter',
initialState: {
value: 0,
},
reducers: {
increment: (state) => {
state.value += 1;
},
decrement: (state) => {
state.value -= 1;
},
incrementByAmount: (state, action) => {
state.value += action.payload;
},
},
});
export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;
مرحله 4: ارائه استور به برنامه با React-Redux
در فایل اصلی پروژه (مثلاً index.js
یا App.js
)، کامپوننت Provider
را از React-Redux وارد کرده و استور خود را به آن اضافه کنید:
javascriptCopy codeimport React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
مرحله 5: استفاده از Redux State و Dispatch در کامپوننتها
از هوکهای useSelector
و useDispatch
برای دسترسی به وضعیت (state) و انجام عملیات (dispatch actions) استفاده کنید:
javascriptCopy codeimport React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, incrementByAmount } from './counterSlice';
function Counter() {
const count = useSelector((state) => state.counter.value);
const dispatch = useDispatch();
return (
<div>
<h1>{count}</h1>
<button onClick={() => dispatch(increment())}>+</button>
<button onClick={() => dispatch(decrement())}>-</button>
<button onClick={() => dispatch(incrementByAmount(5))}>Add 5</button>
</div>
);
}
export default Counter;
نتیجهگیری
با استفاده از Redux Toolkit میتوانید مدیریت وضعیت را در برنامههای خود سادهتر و کارآمدتر کنید. این ابزار تنظیمات پیچیده Redux را خودکار کرده و نوشتن کدهای تمیز و قابل نگهداری را تسهیل میکند.
برای اطلاعات بیشتر، به مستندات رسمی Redux Toolkit مراجعه کنید.
4o