Reactor
For interactive UIs that react to the state of the CreativeEngine, we provide a mechanism that works similar to reactivity solutions in MobX, Svelte JS or SolidJS, Valtio, Zustand or Jotai, that we call the "Reactor".
The Reactor can be used to create Reactions. Reactions take functions that read from the CreativeEngine APIs and are automatically notified when any of those reads results in a new result.
First, simply create a reaction by calling engine.reactor.createReaction()
Write a function that reads from the engine. To record and track those reads in
your reaction, wrap the function body in reaction.track().
Tell the reaction what to do when the result of the reads from the engine has changed.
In this case, we simply want to run the logSelectedElements function again.
The logSelectedElements function has not run yet, so the reaction is unaware of
what read calls it contains. To start tracking the findAllSelected call, we need
to invoke the logSelectedElements function once.
From now on, whenever the result of findAllSelected changes, we will log
the selected elements to the console.
To unsubscribe a callback from the reaction, call the unsubscribe method that was returned during the subscription.
To completely unsubscribe all listeners during disposal of your application,
you can call the dispose method on the reaction.
Integrations#
The Reaction interface exposed by the reactor is very low-level and not intended to be used directly to build your UI. It is expected to create a framework specific wrapper around it that makes this mechanism more comfortable to use. One integration is already provided by us.
React#
The React integration for the Reactor can be imported from @cesdk/engine/integrations/react.
The withEngine HOC can make an entire React component subscribe to changes in
the engine. To do that, simply wrap your component in withEngine. Your component
should expect a Creative Engine instance via its engine prop.
If you don't want to wrap your entire component in withEngine you can use our
useEngineSelector hook to fetch some data from the engine and re-render
automatically when that data has changed.
The hook takes an engine instance as its first argument and a selector function as its second argument. The selector function is called with the engine instance and its return value is returned by the hook itself. When the return value changes, the hook triggers a re-render of any component it's used in.
As a convenience, the the useEngineSelector hook will not re-render your
component when the value returned is deep equal to its previous value. This
means two arrays or objects are considered unchanged when the values they contain
are identical. This makes it much easier to work with engine methods that return
arrays or to construct objects with multiple values that you're interested in inside
the selector function.
Other integrations#
Over time, depending on customer demand we will provide more integrations for popular frameworks and libraries.