restate / v1.0.0

শুরু

restate ইনস্টল করুন, প্রথম মান কম্পোনেন্টের মধ্যে ভাগ করুন আর একই স্টোর React-এর বাইরে ব্যবহার করুন।

এই পাতায়ইনস্টল করুনআপনার প্রথম ভাগ করা স্টেটমান হালনাগাদ করাReact-এর বাইরে ব্যবহারTypeScriptReact Nativeসব প্ল্যাটফর্মে একটি ঘোষণা

ইনস্টল করুন

restate React 16.8 ও নতুন সংস্করণে কাজ করে। TypeScript ডিক্লারেশন সঙ্গে আসে, আর রানটাইমে অন্য কোনো নির্ভরতা নেই।

Terminal
npm install @kkwaenggwari/restate

আপনার প্রথম ভাগ করা স্টেট

স্টোর একবার, কম্পোনেন্টের বাইরে তৈরি করুন। restate যে মান ফেরত দেয় সেটি হুকও, আবার set ও get-এর মতো মেথডসহ অবজেক্টও।

Editor আর CharacterCount-এর মধ্যে কোনো props বা Provider নেই। একটিতে টাইপ করলে অন্যটি হালনাগাদ হয়।

JavaScript / JSX
import { restate } from '@kkwaenggwari/restate';

export const useDraft = restate('');

export function Editor() {
  const text = useDraft();
  return <textarea value={text} onChange={(event) => useDraft.set(event.target.value)} />;
}

export function CharacterCount() {
  const count = useDraft((text) => text.length);
  return <span>{count} characters</span>;
}

মান হালনাগাদ করা

set নতুন মান বা আগের মানের একটি ফাংশন নেয়। reset আপনার ঘোষিত মানে ফিরিয়ে দেয়।

মানকে অপরিবর্তনীয় ধরুন: পুরোনোটা বদলানোর বদলে নতুন অবজেক্ট বা অ্যারে ফেরত দিন, যাতে সিলেক্টর পরিবর্তন দেখতে পায়।

আপনি push দিয়ে cart.items-এ আইটেম যোগ করে useCart.set(cart) কল করলেন। কিছুই রেন্ডার হয় না কেন?

স্টোর একই অবজেক্ট পায় আর Object.is কোনো পরিবর্তন দেখে না। নতুন অবজেক্ট ফেরত দিন, যেমন useCart.set(cart => ({ ...cart, items: [...cart.items, item] }))।

JavaScript / JSX
useCount.set(10); // replace the value
useCount.set((count) => count + 1); // compute from the previous value
useCount.reset(); // back to the declared initial value

React-এর বাইরে ব্যবহার

একই স্টোর ইভেন্ট হ্যান্ডলার, সার্ভিস আর টেস্টে কাজ করে। get বর্তমান মান পড়ে, আর subscribe প্রতিটি পরিবর্তনের পরে আপনাকে কল করে এবং শোনা বন্ধের ফাংশন ফেরত দেয়।

JavaScript / JSX
import { useCart } from './stores/cart';

// Any module, event handler or test can use the same store.
const current = useCart.get();
useCart.set((cart) => ({ ...cart, items: [...cart.items, 'Pen'] }));

const stop = useCart.subscribe((cart, previous) => {
  console.log(previous.items.length, '→', cart.items.length);
});
stop();

TypeScript

স্টেটের টাইপ একবার দিন। সিলেক্টর, set আর প্রতিটি মেথড সেখান থেকেই টাইপ পায়।

JavaScript / JSX
import { restate } from '@kkwaenggwari/restate';

type Cart = { items: string[]; coupon: string };

export const useCart = restate<Cart>({ items: [], coupon: '' });

const count = useCart((cart) => cart.items.length); // number
useCart.set((cart) => ({ ...cart, coupon: 'SPRING' }));

React Native

React Native-এ মেমরির স্টোরের আর কিছু লাগে না। স্টেট সংরক্ষণের জন্য react-native-mmkv ইনস্টল করুন; React Native এন্ট্রি পয়েন্ট সেটি নিজে লোড করে।

bare প্রজেক্টে ইনস্টলের পরে iOS-এর জন্য pod install চালান। Expo-তে development build ব্যবহার করুন, কারণ MMKV একটি নেটিভ মডিউল।

Terminal
npm install @kkwaenggwari/restate react-native-mmkv@4 react-native-nitro-modules

সব প্ল্যাটফর্মে একটি ঘোষণা

সংরক্ষিত স্টোর ব্রাউজারে IndexedDB আর React Native-এ MMKV ব্যবহার করে। ঘোষণা আর আপনার কম্পোনেন্ট একই থাকে।

JavaScript / JSX
import { persistedRestate } from '@kkwaenggwari/restate';

// IndexedDB on the web, MMKV on React Native. Same declaration.
export const useDraft = persistedRestate('', { key: 'draft' });

ডকুমেন্টেশনে খুঁজুন

সব গাইডের শিরোনাম, বিবরণ আর লেখায় খুঁজুন।