هنگامی که یک کلاینت (سمت فرانت‌اند) به طور مداوم برای دریافت پاسخ‌های هوش مصنوعی با سرور ارتباط برقرار می‌کند، رفت‌و‌آمدهای تکراری داده‌ها (Redundant Requests) می‌تواند هزینه‌های API (مثل OpenAI یا Anthropic) را به شدت بالا ببرد و پهنای باند سرور را فلج کند.

در این مقاله تخصصی، عمیقاً بررسی می‌کنیم که چطور با استفاده از Redux Toolkit Query (RTK Query) در فرانت‌اند، مکانیزم‌های کشینگ (Caching)، ددواپ (Deduping) و مدیریت وضعیت (State Management) قدرتمندی پیاده کنیم تا مصرف توکن‌های هوش مصنوعی را به حداقل برسانیم. در نهایت، روش راه‌اندازی ابزارهای توسعه آن روی ویندوز را بررسی کرده و با یک سناریوی کاملاً واقعی در محیط کدنویسی پیش می‌رویم.

مقدمه: مشکل: «توکن» در هوش مصنوعی چیست و چرا هدر می‌رود؟

وقتی از ابزارهایی مثل Claude Code یا Codex (همان هوش مصنوعی که کد می‌نویسد) استفاده می‌کنید، هر چیزی که به آنها می‌گویید یا نشان می‌دهید (مثل خروجی ترمینال، خطاها، لیست فایل‌ها) به قطعات کوچکی به نام توکن تبدیل می‌شود.

• شما معمولاً بر اساس تعداد توکن هزینه می‌دهید.

• هر چه توکن بیشتری مصرف کنید، کندتر و گران‌تر کار می‌کند.

مشکل بزرگ: بیشتر خروجی‌هایی که از ترمینال به AI می‌دهید (مثل ls -la، git status، خطاهای ESLint، لاگ‌های طولانی تست) اصلاً برای AI مفید نیستند. ولی AI همه‌ی آنها را می‌خواند و توکن‌های شما را می‌سوزاند.

rtk از راه میرسد! rtk یک برنامه‌ی ساده به زبان Rust است که بین ترمینال شما و هوش مصنوعی قرار می‌گیرد. کارش این است که خروجی‌های اضافی و پرحجم را فشرده/خلاصه می‌کند و فقط بخش مهم را به AI می‌دهد.

مثلاً:

• به جای ۱۰۰۰ خط لاگ eslint، فقط خلاصه‌ی خطاهای واقعی را می‌دهد.

• به جای خروجی diff حجیم، فقط تغییرات کلیدی را نگه می‌دارد.

پس:

• قبلاً: هر بار که به AI کد نشان می‌دادید، کلی خروجی بی‌ربط ترمینال هم می‌رفت، توکن هدر می‌رفت، هزینه بالا می‌رفت، و AI مجبور بود مطالب بی‌ربط را هم «بخواند» (کندتر می‌شد).

• با rtk: خروجی‌های تکراری و پرحجم حذف یا خلاصه می‌شوند. در این آزمایش خاص، ۸۸ درصد توکن‌ها ذخیره شده. یعنی هزینه و زمان به شدت کاهش یافته، و AI فقط روی چیزهای مهم تمرکز می‌کند.

بخش اول: چرا مدیریت State در فرانت‌اند، کلید کاهش توکن مصرفی هوش مصنوعی است؟

هر درخواست به مدل‌های زبانی بزرگ شامل دو بخش توکن است: توکن‌های ورودی (Prompt Tokens) و توکن‌های خروجی (Completion Tokens). در برنامه‌های چت، تحلیل متن یا سیستم‌های توصیه‌گر، کاربران معمولاً یک کار را چند بار تکرار می‌کنند یا صفحات را جابجا می‌کنند.

اگر معماری فرانت‌اند شما برای هر بار باز شدن یک کامپوننت، درخواست جدیدی به سمت API هوش مصنوعی ارسال کند، نقایص زیر رخ می‌دهد:

1. هزینه مالی مضاعف: پرداخت هزینه برای توکن‌های ورودی و خروجی کاملاً تکراری.

2. تاخیر در تجربه کاربری (Latency): مدل‌های هوش مصنوعی زمان‌بر هستند؛ تکرار درخواست یعنی انتظار بیهوده کاربر.

3. فشار بر سرور (Server Overload): پردازش درخواست‌های تکراری در لایه بک‌اند.

نقش RTK Query در حل این بحران

RTK Query بخشی از پکیج محبوب Redux Toolkit است که به طور اختصاصی برای مدیریت داده‌های دریافتی از سرور (Data Fetching و Caching) طراحی شده است. RTK Query با استفاده از قابلیت‌های زیر مصرف توکن را کاهش می‌دهد:

• Query Deduping (حذف درخواست‌های همزمان تکراری): اگر دو کامپوننت در یک لحظه به یک داده از هوش مصنوعی نیاز داشته باشند، RTK Query فقط یک درخواست به سرور می‌فرستد.

• Cache Lifetime Management (مدیریت عمر کش): پاسخ‌های هوش مصنوعی تا زمانی که معتبر هستند در حافظه کلاینت باقی می‌مانند. اگر کاربر بین تب‌ها جابجا شود، داده‌ها از کش خوانده می‌شوند، نه از طریق فراخوانی مجدد API.

• Optimistic Updates: بهبود تجربه کاربری بدون نیاز به تکرار درخواست‌ها برای تاییدات کوچک.

بخش دوم: راهنمای نصب و آماده‌سازی محیط توسعه روی ویندوز

برای شروع کار با Redux Toolkit و پیاده‌سازی این سیستم روی سیستم‌عامل ویندوز، نیاز به یک محیط توسعه پایدار داریم. مراحل زیر را گام‌به‌گام در ویندوز اجرا کنید.

۱. نصب Node.js (پیش‌نیاز اصلی)

RTK Query در اکوسیستم جاوااسکریپت/تایپ‌اسکریپت (React/Next.js) کار می‌کند.

• به سایت رسمی Node.js بروید و نسخه LTS را دانلود کنید.

• فایل .msi را اجرا کرده و مراحل نصب را پیش ببرید (گزینه افزودن به PATH را حتماً تیک بزنید).

• برای اطمینان از نصب موفق، ترمینال ویندوز (PowerShell یا CMD) را باز کنید و دستورات زیر را وارد کنید:

  node -v
  npm -v
  

### ۲. ایجاد پروژه React با Vite
پیشنهاد من استفاده از Vite به جای ابزارهای قدیمی است، چون سرعت فوق‌العاده بالاتری روی فایل‌سیستم ویندوز دارد:
npm create vite@latest ai-token-optimizer -- --template react-ts
cd ai-token-optimizer

۳. نصب Redux Toolkit و RTK Query

حالا پکیج‌های اصلی مدیریت وضعیت را نصب می‌کنیم:

npm install @reduxjs/toolkit react-redux

بخش سوم: پیاده‌سازی معماری با یک مثال واقعی (سیستم تحلیل هوشمند متون)

فرض کنید در حال ساخت پلتفرمی هستیم که مقالات یا کدهای طولانی را دریافت کرده و با استفاده از هوش مصنوعی، یک "خلاصه مدیریتی (Summary)" و "لیست کلمات کلیدی (Keywords)" تولید می‌کند.

بدون RTK Query، اگر کاربر یک متن ثابت را تغییر ندهد اما بین صفحات مختلف برنامه جابجا شود، کامپوننت دوباره رندر شده و برای یک متن ۵۰۰۰ کلمه‌ای، مجدداً هزاران توکن مصرف می‌شود! ما می‌خواهیم جلوی این فاجعه را بگیریم.

گام اول: طراحی API Layer با RTK Query

یک فایل به نام aiApi.ts در مسیر src/services/ ایجاد می‌کنیم. در اینجا جادوی اصلی کشینگ رخ می‌دهد. ما عمر کش را با استفاده از keepUnusedDataFor مدیریت می‌کنیم تا داده‌ها بیهوده از بین نروند.

// src/services/aiApi.ts
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

interface ApiResponse {
  summary: string;
  keywords: string[];
  tokensUsed: number;
}

interface ApiRequest {
  textHash: string; // استفاده از هش متن به عنوان کلید منحصر به فرد کش
  text: string;
}

export const aiApi = createApi({
  reducerPath: 'aiApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/api/' }), // آدرس بک‌اند شما
  endpoints: (builder) => ({
    // تعریف کوری برای تحلیل متن توسط هوش مصنوعی
    analyzeText: builder.query<ApiResponse, ApiRequest>({
      query: (body) => ({
        url: 'ai/analyze',
        method: 'POST',
        body,
      }),
      // کش را به مدت ۳۰۰ ثانیه (۵ دقیقه) معتبر نگه دار
      keepUnusedDataFor: 300,
      
      // مشخص کردن اینکه کلید کش بر اساس هش متن ساخته شود
      // اگر متن یکسان باشد، درخواست جدیدی ارسال نخواهد شد
      forceRefetch({ currentArg, previousArg }) {
        return currentArg?.textHash !== previousArg?.textHash;
      },
    }),
  }),
});

export const { useAnalyzeTextQuery } = aiApi;

نکته معماری: به جای ارسال کل متن به عنوان کلید کش، از textHash استفاده می‌کنیم. این کار باعث می‌شود حافظه RAM کلاینت با متون چند مگابایتی اشغال نشود و فرآیند مقایسه کلیدهای کش در Redux بسیار سریع‌تر انجام شود.

گام دوم: پیکربندی Redux Store

حالا باید این API را به استور مرکزی اپلیکیشن متصل کنیم تا ریداکس بتواند میڈل‌ورهای (Middleware) کشینگ را مدیریت کند.

// src/app/store.ts
import { configureStore } from '@reduxjs/toolkit';
import { aiApi } from '../services/aiApi';

export const store = configureStore({
  reducer: {
    [aiApi.reducerPath]: aiApi.reducer,
  },
  // اضافه کردن میدل‌ورهای پیش‌فرض ریداکس به همراه میدل‌ور تخصصی RTK Query برای مدیریت کش
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(aiApi.middleware),
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

برای متصل کردن استور به کل برنامه، فایل main.tsx را به شکل زیر ویرایش می‌کنیم:

// src/main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { Provider } from 'react-redux';
import { store } from './app/store';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

گام سوم: توسعه کامپوننت هوشمند فرانت‌اند

حالا کامپوننتی می‌سازیم که تغییرات متن را بررسی کرده و تنها در صورت نیاز، درخواست را به سمت LLM ارسال می‌کند. برای تولید textHash در دنیای واقعی می‌توانید از کتابخانه‌های کوچکی مثل crypto-js یا تابع ساده‌ی هشینگ زیر استفاده کنید:

// یک تابع ساده برای هش کردن رشته‌ها در جاوااسکریپت
const generateHash = (str: string): string => {
  let hash = 0;
  for (let i = 0; i < str.length; i++) {
    const char = str.charCodeAt(i);
    hash = (hash << 5) - hash + char;
    hash |= 0;
  }
  return hash.toString(36);
};

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

// src/App.tsx
import React, { useState } from 'react';
import { useAnalyzeTextQuery } from './services/aiApi';

const generateHash = (str: string): string => {
  let hash = 0;
  for (let i = 0; i < str.length; i++) {
    const char = str.charCodeAt(i);
    hash = (hash << 5) - hash + char;
    hash |= 0;
  }
  return hash.toString(36);
};

export default function App() {
  const [inputText, setInputText] = useState('');
  const [activePayload, setActivePayload] = useState<{ text: string; hash: string } | null>(null);

  // فراخوانی هوشمند کوری؛ تا زمانی که activePayload تغییر نکند، هیچ درخواستی ارسال نمی‌شود
  const { data, error, isLoading, isFetching } = useAnalyzeTextQuery(
    activePayload ? { text: activePayload.text, textHash: activePayload.hash } : skipToken,
    { skip: !activePayload }
  );

  const handleAnalyze = () => {
    if (!inputText.trim()) return;
    const hash = generateHash(inputText);
    setActivePayload({ text: inputText, hash });
  };

  return (
    <div style={{ padding: '24px', fontFamily: 'sans-serif', maxWidth: '800px', margin: '0 auto' }}>
      <h2>بهینه‌ساز مصرف توکن هوش مصنوعی (RTK Query)</h2>
      <textarea
        rows={8}
        style={{ width: '100%', padding: '12px', borderRadius: '6px', border: '1px solid #ccc' }}
        placeholder="متن طولانی خود را اینجا وارد کنید..."
        value={inputText}
        onChange={(e) => setInputText(e.target.value)}
      />
      <br />
      <button
        onClick={handleAnalyze}
        disabled={isLoading || isFetching}
        style={{ marginTop: '12px', padding: '10px 20px', cursor: 'pointer', background: '#0070f3', color: '#fff', border: 'none', borderRadius: '4px' }}
      >
        {isFetching ? 'در حال تحلیل (یا بازیابی از کش)...' : 'تحلیل متن با هوش مصنوعی'}
      </button>

      <hr style={{ margin: '24px 0' }} />

      {/* نمایش وضعیت کشینگ */}
      {isFetching && <p style={{ color: '#eb5757' }}>💡 در حال بررسی وضعیت استور و دریافت داده...</p>}
      
      {data && !isFetching && (
        <div style={{ background: '#f4f4f4', padding: '16px', borderRadius: '6px' }}>
          <h4 style={{ color: '#27ae60' }}>✓ پاسخ با موفقیت بازیابی شد (مصرف توکن بهینه)</h4>
          <p><strong>خلاصه متن:</strong> {data.summary}</p>
          <p><strong>کلمات کلیدی:</strong> {data.keywords.join(', ')}</p>
          <small style={{ color: '#777' }}>توکن‌های مصرف شده در این درخواست عملیاتی: {data.tokensUsed}</small>
        </div>
      )}

      {error && <p style={{ color: 'red' }}>خطایی در برقراری ارتباط رخ داد.</p>}
    </div>
  );
}

// برای استفاده از skipToken باید آن را از RTK Query ایمپورت کنید:
import { skipToken } from '@reduxjs/toolkit/query';

بخش چهارم: تحلیل رفتار سیستم و آمار کاهش هزینه‌ها

بیایید بررسی کنیم چطور این معماری، رفتار برنامه را دگرگون می‌کند.

سناریوی قبل از بهینه‌سازی

1. کاربر متنی شامل ۳۰۰۰ کلمه (~۴۰۰۰ توکن ورودی) را وارد می‌کند.

2. دکمه تحلیل را می‌زند. سیستم پاسخ را دریافت می‌کند (حدود ۲۰۰ توکن خروجی). مجموع: ۴۲۰۰ توکن.

3. کاربر به تب "تنظیمات پروفایل" می‌رود و دوباره به این صفحه برمی‌گردد. کامپوننت از نو سوار (Mount) می‌شود.

4. سیستم مجدداً همان متن را به سرور می‌فرستد. مجموع کل: ۸۴۰۰ توکن.

سناریوی بعد از بهینه‌سازی با RTK Query

1. کاربر همان متن را وارد کرده و دکمه را می‌زند. درخواست ارسال شده و مقدار textHash برابر با a1b2c3 ثبت می‌شود. ۴۲۰۰ توکن مصرف می‌شود.

2. پاسخ در کش ریداکس تحت کلید analyzeText({"textHash":"a1b2c3"}) ذخیره می‌شود.

3. کاربر بین صفحات جابجا می‌شود یا ده بار دیگر روی دکمه کلیک می‌کند.

4. RTK Query متوجه می‌شود که هشد کلید ورودی تغییر نکرده و عمر ۵ دقیقه‌ای کش نیز تمام نشده است. بنابراین درخواست شبکه را کاملاً مسدود می‌کند و داده‌ها را ظرف چند میلی‌ثانیه از حافظه RAM کلاینت بازمی‌گرداند.

5. مصرف توکن برای دفعات دوم به بعد: دقیقاً صفر!

بخش پنجم: تکنیک‌های پیشرفته برای توسعه‌دهندگان ارشد

برای بالا بردن راندمان این ساختار، سه تکنیک زیر را در پروژه‌های بزرگ مقیاس هوش مصنوعی اعمال کنید:

1. Conditional Fetching (فراخوانی مشروط): همانطور که در کد بالا با skipToken پیاده شد، اجازه ندهید کوری‌ها به صورت خودکار با مقادیر خالی یا نامعتبر اجرا شوند.

2. Polling برای فرآیندهای طولانی (Long-running Tasks): اگر پردازش LLM شما بیش از ۳۰ ثانیه طول می‌کشد، کلاینت نباید مرتباً درخواست کلان بفرستد. بک‌اند باید یک jobId برگرداند و RTK Query با قابلیت pollingInterval هر چند ثانیه یک‌بار فقط وضعیت آن jobId کوچک را بررسی کند (که مصرف توکنی ندارد) تا زمانی که کار تمام شود.

3. Invalidation Tags هوشمند: اگر متنی توسط کاربر در دیتابیس ویرایش شد، با استفاده از سیستم providesTags و invalidatesTags در RTK Query، دقیقاً کش مربوط به همان مقاله را منقضی کنید تا داده‌های منسوخ به کاربر نمایش داده نشود.

نتیجه‌گیری

کاهش هزینه‌های هوش مصنوعی صرفاً به معنی انتخاب مدل‌های ارزان‌تر (مثل مهاجرت از GPT-4 به GPT-4o-mini) نیست، بلکه به چگونگی مصرف ما از این مدل‌ها برمی‌گردد. با پیاده‌سازی ابزاری مانند RTK Query، ما لایه کلاینت را به یک سنگر محافظتی تبدیل می‌کنیم که از ارسال درخواست‌های تکراری و بی‌هوده به سمت سرور جلوگیری می‌کند. این کار نه تنها هزینه‌های مالی شارژ پنل‌های هوش مصنوعی را به شدت کاهش می‌دهد، بلکه سرعت پاسخ‌دهی نرم‌افزار و رضایت نهایی کاربر را تضمین می‌کند.