State Management

EDL provides a simple yet powerful state management system using setState and accessing state variables.

Basic Usage

Setting State

Use setState for individual updates and setStates for updating multiple values at once:

<Script>
    // Set a single state value
    setState('count', 0);
    
    // Set multiple state values at once
    setStates({
        count: 0,
        user: {
            name: 'John',
            email: '[email protected]'
        },
        isLoading: false
    });

    // For updates based on previous values,
    // use individual setState calls
    setState('count', prevCount => prevCount + 1);
    setState('total', prevTotal => prevTotal + 100);
</Script>

Accessing State

Access state values using the state object:

<Text>Counter: {state.count}</Text>
<Text>Welcome, {state.user.name}!</Text>

Updating State

Update state values in response to actions:

<Script>
    // Define action handlers in Script
    const $handleUpdateValues = async () => {
        // Update multiple states at once with direct values
        setStates({
            isLoading: true,
            error: null,
            lastUpdated: new Date()
        });

        // For updates using previous values,
        // use separate setState calls
        setState('count', prevCount => prevCount + 1);
        setState('total', prevTotal => prevTotal + 100);
    };
</Script>

<Button action={$handleUpdateValues}>
    Update Values
</Button>

Advanced Usage

Computed Values

Use Script to create computed values based on state:

<Script :dependencies={[state.items]}>
    const $filteredItems = state.items.filter(item => item.isActive);
    const $totalCount = $filteredItems.length;
</Script>

<Text>Active Items: {totalCount}</Text>

Reactive Computations

Use Script with dependencies to react to state changes:

<Script :dependencies={[state.firstName, state.lastName]}>
    setState('fullName', `${state.firstName} ${state.lastName}`);
</Script>

State in Loops

Access and update state within loops:

<Script>
    const $handleItemSelect = (item) => {
        setState('selectedId', item.id);
    };
</Script>

<Fragment :forEach={state.items} :as="item">
    <Button 
        action={() => $handleItemSelect(item)}
        variant={state.selectedId === item.id ? 'filled' : 'outlined'}
    >
        {item.name}
    </Button>
</Fragment>

Best Practices

• Use descriptive state names
• Keep state values serializable
• Group related state values into objects
• Use dependencies to track state changes
• Avoid deeply nested state structures
• Consider using computed values for derived state