استفاده از Redux در ReactJS

شاید بارها کلمه Redux رو در حین آموزش شنیده باشید و بپرسید Redux چی هست؟در این مقاله کوتاه علاوه بر تعریف ریداکس نحوه استفاده از آن هم توضیح خواهم داد.

آموزش استفاده از Redux در ReactJS

ریداکس چیست؟

Redux در یک تعریف ساده یک فضای ذخیره سازی برای نگهداری متغیرهاست که می خوایم از اون فضا و متعیرهای داخلش به صورت اشتراکی در پروژه استفاده کنیم و بهشون دسترسی داشته باشیم.

دسترسی به حافظه ریداکس از طریق “Reducer” و “Actions” انجام می شود که در ادامه این موارد رو توضیح میدم.

نصب ریداکس در ReactJS

برای نصب Redux در ترمینال دستور زیر رو وارد کنید:

				
					npm install redux react-redux

در این دستور redux همان فضای ذخیره سازی هست و react-redux این امکان رو به ما میده که بتونیم از طریق React با حافظه ریداکس ارتباط برقرار کنیم.

بعد از نصب اگر وارد فایل “package.json” بشیم موارد نصب شده رو مشاهه خواهیم کرد، از نسخه 7 به بعد “react-redux” امکان استفاده از ریداکس با هوک ها فراهم شده که یکی از ویژگی های مهم می باشد.

نصب ریداکس-Redux

آیتم هایی که بعد از نصب ریداکس باید اونها رو بشناسیم و در مورد نحوه کارکردشون بدونیم شامل موارد زیر هستند:

1) فضای ذخیره سازی (Store) در ریداکس

در بالاتر تعریف کاملی از store رو گفتیم، به عنوان مثال ما اگر متغیر یا متغیرهایی با مقادیر مختلف داشته باشبم که بخوایم در قسمت های مختلف پروژه ار آنها استفاده کنیم نیاز هست آنها رو در محلی مشخص نگهداری کنیم و آدرس این محل یا فضا رو به کامپوننت های خودمون بدیم تا در زمان نیاز به آنها مراجعه کنند.

این کار رو با “props” ها می تونیم انجام بدیم اما در پروژه های متوسط و بزرگ مدیریت متغیرها دشوار خواهد بود.

2) Action در ریداکس

اکشن در ترجمه به معنای انجام کاری هست اما در ریداکس این معنی را نمی دهد.در Action ما تعریف می کنیم با باید بگیم چه کاری می خوایم انجام بدیم در store.

به عنوان مثال اگر دکمه ای داشته باشیم که با هر بار کلیک مقداری افزایش پیدا کنه در store اون عمل افزایش میشه نامش میشه action.

یه مثال دیگه، “من گرسنمه!” این عبارت یک Action هست و به معنای خوردن غذا نیست.

3) Reducer در ریداکس

کاهنده یا “Reducer” چیزی نیست جز یک تابع خالص که currentState و Action را می گیرد و حالت جدیدی را برمی گرداند. بزارید ساده تر بگم، reducer به ما میگه یک Action به چه شکل وضعیت رو در store تغییر می دهد.

در واقع اکشن ها رو برسی میکنه و بر اساس آنها وضعیت store یا فضای ذخیره سازی رو modify یا تغییر میده.

4) Dispatch در ریداکس

در Dispatch ما عملیات یا اکشن های موردنظر رو اجرا(run) می کنیم.

ما Action رو به Reducer می فرستیم اونجا بر اساس نوع اکشن وضعیت store بررسی میشه و در نهایت توسط dispatch اجرا میشه.

———————————————-

خوب حالا که با موارد مورد نیاز در ریداکس آشنا شدیم بریم ببینیم به چه شکل می تونیم از اون در پروژه ReactJS خودمون استفاده کنیم.

ایجاد ریداکس در ReactJS

در مرحله اول نیاز هست که فضای ذخیره سازی یا stroe خودمون رو ایجاد کنیم، از اونجا که این store باید قابل استفاده در همه قسمت های پروژه باشه اون رو در فایل “index.js” وارد و ایجاد می کنیم.

				
					import { createStore } from "redux";

حالا Action رو ایجاد می کنیم که در این مثال دو تابع سادست که تنها یک object رو برمیگردونه و برای افزایش و کاهش مقداری استفاده می شوند.

				
					// ACTION INCREMENT
const increment = () => {
  return {
    type: "INCREMENT",
  };
};
const decrement = () => {
  return {
    type: "DECREMENT",
  };
};

بریم برای ایجاد Reducer، در اینجا باز یک متد داریم که مقدار state و action رو به عنوان آرگومان براش تعریف کردیم.

داخل متد هم بر اساس نوع Action مقدار state تغییر پیدا میکنه. در نهایت تابع counter با استفاده از متد createStore در متغیر store ذخیره میشه.

				
					// REDUCER
const counter = (state = 0, action) => {
  switch (action.type) {
    case "INCREMENT":
      return state + 1;
    case "DECREMENT":
      return state - 1;

    default:
    // do nothing
  }
};
let store = createStore(counter);

حالا برای اینکه بتونیم نتیجه رو در کنسول ببینیم و دستورات رو با استفاده از dispacth اجرا کنیم بدین شکل عمل می کنیم:

				
					// Display
store.subscribe(() => console.log(store.getState()));

// DISPATCH
store.dispatch(increment());

//RESULT
1

در نهایت کدینگ فایل index.js به شکل زیر خواهد شد.

				
					import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { createStore } from "redux";

// ACTION INCREMENT
const increment = () => {
  return {
    type: "INCREMENT",
  };
};
const decrement = () => {
  return {
    type: "DECREMENT",
  };
};

// REDUCER
const counter = (state = 0, action) => {
  switch (action.type) {
    case "INCREMENT":
      return state + 1;
    case "DECREMENT":
      return state - 1;

    default:
    // do nothing
  }
};

let store = createStore(counter);

// Display
store.subscribe(() => console.log(store.getState()));

// DISPATCH
store.dispatch(increment());

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);


reportWebVitals();