State Container Pattern

File: resources/js/types/state.ts

Setiap store di aplikasi mengikuti pola StateContainer<TData>. Ini memastikan konsistensi di semua modul.

Kenapa Ada

Tanpa pattern standar, setiap pengembang akan membuat bentuk state sendiri. StateContainer memaksakan satu struktur sehingga store mana pun bisa langsung dipahami.

Bentuk Container

interface StateContainer<TData> {
    meta: StateMeta;     // loading, initialized, timestamp
    data: TData;         // data domain
    errors: StateErrors; // error validasi
}

Aturan Arsitektur Store

Component → Store → Service → API

• Component: panggil action store, subscribe ke state
• Store: kelola StateContainer, delegasi logika ke service
• Service: fungsi murni, orchestration
• API: HTTP fetch saja

Cara Buat Store

import { initialMeta } from '@/types/state';
import type { StateContainer } from '@/types/state';

interface MyData { items: string[]; sending: boolean; }
type MyContainer = StateContainer<MyData>;

function createState(): MyContainer {
    return {
        meta: { ...initialMeta, initialized: true },
        data: { items: [], sending: false },
        errors: {},
    };
}

Nama File

Pattern: <aksi>-<modul>.stores.ts

Contoh: fetch-bulletin.stores.ts, super-user-form.stores.ts