Configuration Files and Stores

State Management
Stores
Configuration
Learn to centralize data with configuration files and manage reactive state with stores.
Feature Tour (Episode 7)
Back to the Academy

Configuration Files and Stores

Quick summary: Learn to centralize data with configuration files and manage reactive state with stores for persistent data storage.

Introduction to data management

This tutorial demonstrates how to use configuration files for centralized static values and stores for reactive, persistent data management in your application.

1. Configuration files basics

What are configuration files?

Configuration files allow you to centralize values that are reused throughout your application. Change the value once, and it updates everywhere automatically.

Creating your first configuration file

  1. Click + to add a new configuration file
  2. Click Key 0 to rename it to something meaningful (e.g., "name")
  3. Set the Type: String
  4. Enter a Value: e.g., "mybilliondollarcompany"

Using configuration values in components

  1. Create a new component
  2. Add a variable and select your configuration value
  3. Switch to Preview: The value displays automatically
  4. Key benefit: This value is now centralized and reusable

Using configuration in Visual Scripting

  1. Go to the Logic tab
  2. Add a Get node for your configuration (e.g., "get new config")
  3. Spread the object to access its properties
  4. Press Ctrl + Space to verify the value
  5. Access the specific property (e.g., "name")

Testing centralization

  1. Return to your configuration file
  2. Change the value (e.g., from "mybilliondollarcompany" to "LunaPark")
  3. Go back to your component
  4. Result: The value is automatically updated everywhere it's used

Use case: Perfect for app names, API endpoints, feature flags, or any value used across multiple components.

2. Understanding stores

What makes stores different?

Stores are like configuration files but with reactive capabilities and persistence options:

  • Memory: Resets when page reloads
  • Session: Persists within the same browser tab
  • Local: Persists across page reloads and browser sessions (stored on user's computer)

Storage scope limitations

  • Local storage is computer-specific
  • Data doesn't sync across different browsers
  • Data remains only in the browser where it was created

3. Building a to-do list with stores

Creating the store structure

  1. Create a new store
  2. Add a tasks property with type: Array of Objects
  3. Define the object structure:
    • icon: String or emoji
    • text: String

Understanding store views

  • Left side: Default values (initial state)
  • Right side: Real-time values (current state)

Setting default values

  1. Add a default task object:
    • icon: "📝"
    • text: "finish the tutorial"
  2. Click Reset preview to load the default values

Key difference from configuration files

Stores are reactive: When you change a value, it updates everywhere instantly.

4. Templates for dynamic rendering

What are templates?

Templates enable two powerful rendering patterns:

  1. Conditional rendering: Display content only if a condition is true
  2. Loop rendering: Repeat content for each item in an array

Using a For loop template

  1. Create a component
  2. Add a template with type: For
  3. Set the data source to your store's tasks array
  4. Result: The template repeats for each task

Accessing template variables

Templates automatically generate two variables:

  • Index: Position in array (0, 1, 2, etc.)
  • Value: The current item's data

Displaying task data

  1. Inside the template, add a Card widget
  2. Add elements to display:
    • Icon from value.icon
    • Text from value.text
  3. Result: Each task renders in its own card

5. Adding tasks dynamically

Creating the input form

  1. Create two component variables:
    • icon: String (for emoji picker)
    • text: String (for text input)
  2. Add a new Card container
  3. Inside the card, add form elements:
    • Emoji picker bound to icon variable
    • Text input bound to text variable
    • Button labeled "Add task"

Improving the form layout

  1. Wrap inputs in a Flex container
  2. Set direction to horizontal
  3. Add a gap for spacing between elements
  4. Give the text input a minimum width

6. Implementing add task logic

Setting up the click event

  1. Select your "Add task" button
  2. Add a Click event
  3. Open the Logic editor

Building the add task flow

  1. Add Get new store node and spread it
  2. Access the tasks property
  3. Add a Push node to append to the array
  4. Create the new task object:
    • Add Create Object node
    • Add Get icon from component
    • Add Get text from component
  5. Connect the created object to the Push node

Optional: Resetting input fields

After adding a task, reset the form:

  1. Add Set icon node with empty string value
  2. Add Set text node with empty string value
  3. Result: Form clears after each task addition

7. Testing the complete system

Adding your first task

  1. Enter an emoji (e.g., ✈️)
  2. Enter text: "Go to Canada"
  3. Click Add task
  4. Result: Task appears instantly in the list below

Verifying persistence

  1. Add several tasks
  2. Press F5 to reload the page
  3. Result: All tasks remain because we used local storage
  4. Important: This works only in the same browser on the same computer

Understanding the reactive flow

  1. Form inputs update component variables
  2. Click event triggers the logic
  3. Logic pushes new object to store
  4. Template automatically re-renders with new data
  5. Form fields reset to empty state

Key concepts

Configuration files

  • Static centralized values: App name, settings, constants
  • Single source of truth: Update once, change everywhere
  • No reactivity: Values don't change during runtime
  • Access via Get node: Simple retrieval in logic

Stores

  • Reactive data storage: Values update everywhere automatically
  • Three persistence modes: Memory, Session, Local
  • Real-time synchronization: Changes reflect immediately
  • Persistent state: Data survives page reloads (with local storage)

Templates

  • For loops: Render lists dynamically
  • Conditional rendering: Show/hide based on conditions
  • Auto-generated variables: Index and value for each iteration
  • Reactive updates: Re-renders when data changes

Storage persistence

  • Memory: Temporary, resets on reload
  • Session: Per-tab, resets when tab closes
  • Local: Permanent in browser, survives reloads

Best practices

Choosing between configuration and stores

  • Use configuration files for static values that never change at runtime
  • Use stores for data that changes based on user interactions
  • Use stores with local storage for data that should persist between sessions

Store structure design

  • Plan your data schema before creating the store
  • Use meaningful property names for clarity
  • Keep stores focused on specific features (e.g., one store for tasks, another for user settings)

Template optimization

  • Use For templates for lists and arrays
  • Use If templates for conditional content
  • Keep template content simple for better performance
  • Access only needed properties from the value object

Data persistence strategy

  • Memory: Shopping cart data, temporary UI state
  • Session: Form data during multi-step processes
  • Local: User preferences, saved work, to-do lists

Form handling

  • Always reset inputs after successful submission
  • Validate data before adding to stores
  • Provide feedback to users when actions complete
  • Use appropriate input types (emoji picker for icons, text input for text)