ریداکس | Redux چیست؟

ریداکس چیست

Redux | ریداکس یکی از محبوب‌ترین کتابخانه‌های مدیریت وضعیت (state management) در برنامه‌های جاوااسکریپت است. این ابزار به شما کمک می‌کند که وضعیت برنامه‌تان را به صورت متمرکز مدیریت کنید و کدی تمیز، مقیاس‌پذیر و قابل نگهداری بنویسید. ریداکس معمولاً در کنار کتابخانه‌هایی مانند React استفاده می‌شود، اما محدود به آن نیست و با هر فریمورکی که از جاوااسکریپت پشتیبانی کند، کار می‌کند.

اصول اصلی ریداکس

Redux بر اساس سه اصل اساسی طراحی شده است:

  1. یک منبع واحد برای وضعیت (Single Source of Truth):
    تمام وضعیت برنامه در یک شی واحد ذخیره می‌شود که به آن “استور” (Store) می‌گویند. این اصل به شما کمک می‌کند وضعیت برنامه را به راحتی پیگیری کنید.
  2. حالت فقط خواندنی (State is Read-Only):
    وضعیت برنامه به صورت مستقیم تغییر نمی‌کند. برای اعمال تغییرات، باید از “اکشن”‌ها (Action) استفاده کنید.
  3. تغییرات با فانکشن‌های خالص انجام می‌شود (Changes are Made with Pure Functions):
    تغییرات در وضعیت توسط توابع خالصی به نام “ردیوسر” (Reducer) انجام می‌شود. این توابع ورودی و خروجی مشخصی دارند و تغییرات را به صورت پیش‌بینی‌پذیر اعمال می‌کنند.

اجزای اصلی ریداکس

  1. استور (Store):
    محلی که تمام وضعیت برنامه در آن ذخیره می‌شود.
  2. اکشن (Action):
    شی‌ای که یک نوع (type) مشخص دارد و توضیح می‌دهد چه اتفاقی باید بیفتد.
  3. ردیوسر (Reducer):
    تابعی که وضعیت فعلی و اکشن را دریافت کرده و وضعیت جدید را بازمی‌گرداند.
  4. میان‌افزار (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

فهرست مطالب