restate / v1.0.0
開始使用
安裝 restate，在元件之間共享第一個值，並在 React 之外使用同一個 store。
安裝
restate 支援 React 16.8 以上版本，內建 TypeScript 型別宣告，沒有其他執行期相依套件。
npm install @kkwaenggwari/restate你的第一個共享狀態
在元件外部建立一次 store。restate 回傳的值既是 Hook，也是帶有 set、get 等方法的物件。
Editor 和 CharacterCount 之間沒有 props，也沒有 Provider。在其中一個輸入，另一個就會更新。
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 會回到你宣告的初始值。
把值當作不可變資料：回傳新的物件或陣列，而不是修改舊的，selector 才能察覺變化。
你對 cart.items 執行 push，再呼叫 useCart.set(cart)。為什麼什麼都沒有重新渲染？
store 收到的是同一個物件，Object.is 判斷沒有變化。請回傳新的物件，例如 useCart.set(cart => ({ ...cart, items: [...cart.items, item] }))。
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 之外使用
同一個 store 也能用在事件處理函式、服務與測試中。get 讀取目前的值；subscribe 會在每次變化後呼叫你，並回傳一個停止監聽的函式。
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
只要傳一次狀態型別，selector、set 與所有方法都會據此取得型別。
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 上，記憶體 store 不需要任何額外設定。要儲存狀態，請安裝 react-native-mmkv，React Native 進入點會自動載入它。
若是 bare 專案，安裝後請為 iOS 執行 pod install。在 Expo 中，由於 MMKV 是原生模組，請使用 development build。
npm install @kkwaenggwari/restate react-native-mmkv@4 react-native-nitro-modules所有平台，同一個宣告
持久化 store 在瀏覽器中使用 IndexedDB，在 React Native 上使用 MMKV。宣告與元件都維持不變。
import { persistedRestate } from '@kkwaenggwari/restate';
// IndexedDB on the web, MMKV on React Native. Same declaration.
export const useDraft = persistedRestate('', { key: 'draft' });