State এবং Application এর মধ্যে ডেটা সংযোগ

Riot.js তে State এবং Application এর মধ্যে ডেটা সংযোগ একটি গুরুত্বপূর্ণ বিষয়। Riot.js-এ, একটি কম্পোনেন্টের state (স্টেট) হলো সেই ডেটা যা কম্পোনেন্টের অবস্থা এবং UI নির্ধারণ করে। এই স্টেট বিভিন্নভাবে অ্যাপ্লিকেশন স্তরে শেয়ার এবং পরিচালনা করা যেতে পারে, যাতে ইউজার ইন্টারঅ্যাকশন এবং ডেটা আপডেটের মাধ্যমে UI এবং অ্যাপ্লিকেশন সিঙ্ক্রোনাইজড থাকে।

১. State in Riot.js:

Riot.js তে state একটি কম্পোনেন্টের স্থানীয় ডেটা, যা UI-তে পরিবর্তন আনতে ব্যবহৃত হয়। state কোনো কম্পোনেন্টের local data হিসেবে কাজ করে, এবং এটি যখন পরিবর্তিত হয়, তখন কম্পোনেন্টে UI স্বয়ংক্রিয়ভাবে আপডেট হয়ে যায়।

২. State এবং Application এর মধ্যে ডেটা সংযোগ:

একটি অ্যাপ্লিকেশনে বিভিন্ন কম্পোনেন্টে একই ডেটা শেয়ার করার জন্য global state বা shared state ব্যবহার করা হয়। Riot.js তে এটি করার জন্য কিছু সাধারণ পদ্ধতি রয়েছে।

৩. State Management in Riot.js:

Riot.js নিজে থেকে কোনো বিল্ট-ইন স্টেট ম্যানেজমেন্ট ব্যবস্থা সরবরাহ করে না, তবে আপনি সাধারণ JavaScript অবজেক্ট বা Riot.observable ব্যবহার করে গ্লোবাল স্টেট তৈরি করতে পারেন। এছাড়া, আপনি Riot-router বা Redux এর মতো লাইব্রেরি ব্যবহার করে অ্যাপ্লিকেশনের ডেটা পরিচালনা করতে পারেন।

৩.১ Shared State using Riot.observable:

একটি গ্লোবাল বা শেয়ারড স্টেট তৈরি করতে Riot.observable ব্যবহার করা যেতে পারে, যা সমস্ত কম্পোনেন্টের মধ্যে ডেটা শেয়ার করতে সক্ষম।

উদাহরণ: Shared State using Riot.observable

State.js (Shared State):

import riot from 'riot';

export const state = riot.observable({
  title: 'Initial State'
});

Parent Component (ParentComponent.riot):

<parent-component>
  <h1>{state.title}</h1>
  <button onclick={updateTitle}>Update Title</button>

  <script>
    import { state } from './State';

    export default {
      onMounted() {
        state.on('change', () => {
          this.update();
        });
      },

      updateTitle() {
        state.title = 'Updated by Parent!';
      }
    }
  </script>
</parent-component>

Child Component (ChildComponent.riot):

<child-component>
  <h1>{state.title}</h1>

  <script>
    import { state } from './State';

    export default {
      onMounted() {
        state.on('change', () => {
          this.update();
        });
      }
    }
  </script>
</child-component>

ব্যাখ্যা:

• Riot.observable ব্যবহার করে একটি গ্লোবাল স্টেট state তৈরি করা হয়েছে।
• state একটি সাধারণ অবজেক্ট যা বিভিন্ন কম্পোনেন্টে শেয়ার করা হচ্ছে।
• প্যারেন্ট কম্পোনেন্টে state.title পরিবর্তিত হলে, চাইল্ড কম্পোনেন্টে তার পরিবর্তন প্রতিফলিত হবে কারণ উভয় কম্পোনেন্ট একই স্টেট শেয়ার করছে।

৩.২ Using a Shared Store (Shared State Store):

আপনি একটি শেয়ারড স্টোর ব্যবহার করতে পারেন যেখানে সমস্ত অ্যাপ্লিকেশন স্টেট রাখা হবে এবং সেই স্টেট কম্পোনেন্টে প্রয়োগ হবে। এই ধরনের স্টোর অ্যাপ্লিকেশনটি সহজে স্কেলেবল এবং রক্ষণাবেক্ষণযোগ্য করে তোলে।

উদাহরণ: Shared Store Using a Global State Object

Store.js (Global Store):

export const store = {
  title: 'Initial State',
  updateTitle(newTitle) {
    this.title = newTitle;
  }
};

Parent Component (ParentComponent.riot):

<parent-component>
  <h1>{store.title}</h1>
  <button onclick={updateTitle}>Update Title</button>

  <script>
    import { store } from './Store';

    export default {
      updateTitle() {
        store.updateTitle('Updated by Parent!');
        this.update(); // Re-render to reflect changes
      }
    }
  </script>
</parent-component>

Child Component (ChildComponent.riot):

<child-component>
  <h1>{store.title}</h1>

  <script>
    import { store } from './Store';

    export default {
      onMounted() {
        this.update(); // Re-render when component is mounted
      }
    }
  </script>
</child-component>

ব্যাখ্যা:

• store একটি সাধারণ গ্লোবাল স্টেট অবজেক্ট যা অ্যাপ্লিকেশনের স্টেট ধারণ করে।
• store.updateTitle() ফাংশন ব্যবহার করে title পরিবর্তন করা হচ্ছে, এবং এই পরিবর্তনটি প্যারেন্ট এবং চাইল্ড কম্পোনেন্ট উভয়েই প্রতিফলিত হচ্ছে।

৪. State Synchronization (State সিঙ্ক্রোনাইজেশন):

যখন আপনি একাধিক কম্পোনেন্টে একই ডেটা শেয়ার করছেন, তখন আপনাকে সিঙ্ক্রোনাইজেশন নিশ্চিত করতে হবে, যাতে একটি কম্পোনেন্টে ডেটা পরিবর্তিত হলে অন্য কম্পোনেন্টে সেগুলি সঠিকভাবে আপডেট হয়। Riot.js তে state পরিবর্তন হলে this.update() ব্যবহার করে কম্পোনেন্ট রেন্ডার করতে হয়।

উদাহরণ: Synchronizing State Between Components

<!-- App.riot -->
<app>
  <parent-component></parent-component>
  <child-component></child-component>

  <script>
    import ParentComponent from './ParentComponent.riot';
    import ChildComponent from './ChildComponent.riot';

    export default {
      onMounted() {
        this.update(); // Re-render app to synchronize state
      }
    }
  </script>
</app>

Parent Component (ParentComponent.riot):

<parent-component>
  <button onclick={updateState}>Update State</button>

  <script>
    import { store } from './Store';

    export default {
      updateState() {
        store.title = 'Updated State';
        this.update(); // Re-render parent component
      }
    }
  </script>
</parent-component>

Child Component (ChildComponent.riot):

<child-component>
  <h1>{store.title}</h1>

  <script>
    import { store } from './Store';

    export default {
      onMounted() {
        this.update(); // Re-render when component is mounted
      }
    }
  </script>
</child-component>

ব্যাখ্যা:

• store.title গ্লোবাল স্টেটে পরিবর্তিত হলে, প্যারেন্ট এবং চাইল্ড কম্পোনেন্ট উভয়েই সিঙ্ক্রোনাইজড হবে এবং UI স্বয়ংক্রিয়ভাবে আপডেট হবে।

৫. State and Props in Riot.js:

Riot.js-এ state হল কম্পোনেন্টের নিজস্ব ডেটা, এবং props হল প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে পাস করা ডেটা। State এবং props এর মধ্যে পার্থক্য বুঝে, আপনি অ্যাপ্লিকেশন স্তরে ডেটা পরিচালনা করতে পারেন।

উদাহরণ: Using State and Props

Parent Component (ParentComponent.riot):

<parent-component>
  <child-component title={parentTitle}></child-component>

  <script>
    export default {
      onMounted() {
        this.parentTitle = "Title from Parent";
      }
    }
  </script>
</parent-component>

Child Component (ChildComponent.riot):

<child-component>
  <h1>{opts.title}</h1>

  <script>
    export default {
      onMounted() {
        console.log("Received title:", this.opts.title);
      }
    }
  </script>
</child-component>

ব্যাখ্যা:

• parentTitle প্যারেন্ট কম্পোনেন্টের state এবং এটি title হিসাবে চাইল্ড কম্পোনেন্টে props এর মাধ্যমে পাস করা হয়েছে।
• চাইল্ড কম্পোনেন্টে opts.title ব্যবহার করে প্যারেন্ট থেকে আসা ডেটা প্রদর্শিত হচ্ছে।

Riot.js-এ state এবং application এর মধ্যে ডেটা সংযোগ পরিচালনা করতে অনেক উপায় আছে। আপনি global state ব্যবহার করে ডেটা শেয়ার করতে পারেন, যেমন Riot.observable বা সাধারণ JavaScript অবজেক্ট। State synchronization নিশ্চিত করতে, কম্পোনেন্টে state পরিবর্তন হলে this.update() ব্যবহার করতে হয় যাতে UI সঠিকভাবে রেন্ডার হয়।

এছাড়া, props ব্যবহার করে প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে ডেটা পাঠানো এবং শেয়ার করা সম্ভব। Riot.js-এ এই ধরনের স্টেট ম্যানেজমেন্ট সহজ এবং কার্যকরী, যা আপনার অ্যাপ্লিকেশনকে আরো রিয়েক্টিভ এবং ডাইনামিক করে তোলে।