Despite the number of apps you can build in Smart Builder, have you asked yourself how the components communicate with each other in an app, even with SmartBuilder?

How does communication work?

Communication between apps is achieved using a built-in method called the dispatch method. We’ve provided this method to your app’s components. The dispatch method in Smart Builder works to save data in the Schema.

Here is a sample code of the Hello World app to demonstrate the components using the dispatch method:

// hello-world.tsx
const HelloWorld = ({ data, dispatch, className }: ComponentProps<DataStructure, WithStylesProps>) => {...}

// control-panel.tsx file
const Panel = ({ dispatch }: ControlPanelProps<DataStructure>) => (...);

Anytime you invoke the dispatch call, the app’s Schema object will update.

Syntax

The syntax changes depending on the context where the dispatch is called.

💡 This depends on how you structured the Schema object and the Schema methods.

Let me show you an example of the dispatch method:

dispatch((api) => {
	api.get('<your Schema property name>').set('<the value to save>');
	// you can get and set more than one property
});

The dispatch method receives a callback as a parameter that Smart Builder uses to inject the API object that is built upon the Working with a Schema object object configuration.

• Anytime you execute the dispatch method, the main component is re-rendered with the new data dispatched.

Let’s take the Schema of the Hello World app.

import { Schema } from 'ub-shared';

const schema = Schema.object({
  firstName: Schema.string(),
  lastName: Schema.string(),
  styles: Schema.newStyle({
    textAlign: {
      layoutSpecific: false,
    }
  }),
});