Update components

Updating Props, States, and Dispatch Requests.

Stratox provides three key mechanisms to manage data and interactions within your application: props, states, and the dispatcher. While they share similarities, each serves a distinct purpose:

• Props: Data passed directly to views or components. Props are isolated to their respective view instances, allowing you to update specific parts of a page without affecting the entire layout.

• States: Globally accessible within the active route and controller method. Updating a state refreshes the entire page, including all nested components, making it suitable for broader application-wide changes.

• Dispatcher: Handles communication between routes and controller methods. It facilitates making HTTP requests (e.g., GET, POST, PUT, DELETE) and navigating between routes while passing data seamlessly.

Understanding these differences helps you utilize each tool effectively, depending on the scope and requirements of your application.

---

Updating Props

Props are objects and data passed to your views/components, serving as the primary mechanism for passing and updating data. Unlike global variables, props are contained within a view instance, allowing you to dynamically update parts of your page without reloading the entire page.

Example: Updating Props

export default function TextComponent({ props, view, update, context }) {

  // Set default values for props
  context.setDefault({ updatedOnce: false });

  // Define click event to update props
  const clickEvent = this.bind((props, view, item, event) => {
    props.title = 'Headline updated in click event';
  });

  // Update props dynamically after a timeout
  if (!props.updatedOnce) setTimeout(() => {
    props.updatedOnce = true;
    update({ title: "Updated through Timeout" });
    //update(string|object|function|StratoxItem, object|function|StratoxItem);
  }, 2000);

  return `
    <article class="relative card-1 border-bottom ingress">
      <div class="wrapper md">
        <h1 class="headline-1">${props.title}</h1>
        <p>${props.description}</p>
        <button class="button bg-primary" onclick="${clickEvent}">Change headline</button>
      </div>
    </article>
  `;
}

---

Updating States

States are global but scoped to the active route and controller function method. You can set, update, and access states across all nested components. When a state is updated, it refreshes the entire page and its nested components.

Example: Updating States

export default function TextComponent({ props, state }) {

  // Set default values for the state
  state.setDefault({ title: "Hello world" });

  // Dynamically update the state after a timeout
  if (!props.updatedOnce) setTimeout(() => {
    state.update("title", "Updated through Timeout");
    //state.update(string|object, mixed);
  }, 2000);

  return `
    <article class="relative card-1 border-bottom ingress">
      <div class="wrapper md">
        <h1 class="headline-1">${state.get('title')}</h1>
        <p>${props.description}</p>
      </div>
    </article>
  `;
}

---

Dispatching Requests

The dispatcher allows you to manage requests (GET, POST, PUT, DELETE) and pass data between routers and controller methods. If Fetch/Ajax config data is defined in your main config or route, it will trigger automatically.

Example: Dispatching Requests

export default function TextComponent({ props, dispatch, request, http }) {

  // Navigate to a new route with updated data
  if (!request.get.get("title")) setTimeout(() => {
    dispatch.navigateTo("#start", { title: "<em>Headline updated</em>" });
  }, 2000);

  return `
    <article class="relative card-1 border-bottom ingress">
      <div class="wrapper md">
        <h1 class="headline-1">${{request.get.get("title") ?? "Hello World"}}</h1>
        <p>${props.description}</p>
      </div>
    </article>
  `;
}

---

By leveraging props, states, and the dispatcher effectively, you can build dynamic, responsive, and maintainable applications in Stratox. These tools offer flexibility and power to update views and manage application data seamlessly.