Preact/Signals global state example

preact-signals-global-state.ts

function createAppState(initialState: AppState) {
    // Define a signal to hold the state
    const appState = signal(initialState);

    // Define a function to dispatch events to the reducer and its state machine and update the state with the result
    const dispatch = (event: AppEvent) => {
        appState.value = appStateReducer(appState.value, event);
    };

    // Derive readonly selectors for partial state values
    const a = computed(() => appState.value.a);
    const b = computed(() => appState.value.b);
    const c = computed(() => appState.value.c);
    const d = computed(() => appState.value.d);
    const e = computed(() => appState.value.e);
    const f = computed(() => appState.value.f);
    const g = computed(() => appState.value.g);
    const h = computed(() => appState.value.h);
    const i = computed(() => appState.value.i);
    const j = computed(() => appState.value.j);
    const k = computed(() => appState.value.k);
    const l = computed(() => appState.value.l);
    const m = computed(() => appState.value.m);
    const n = computed(() => appState.value.n);
    // ... maybe more in the future

    return {
        state: {
            a,
            b,
            c,
            d,
            e,
            f,
            g,
            h,
            i,
            j,
            k,
            l,
            m,
            n,
        },
        dispatch,
    };
}