A Prodo component is a wrapper around a React component, giving access to the properties of a model. A component can be created from a React component manually with the connect method of a model, or automatically through transpilation.

Additional variables can be provided by plugins.


The state variable holds the current state. To ensure the component is re-rendered when the state is updated, accesses must be wrapped in watch. For example:

<span>The value is {watch(state.count)}</span>

Watch the narrowest scope possible to avoid unnecessary re-renders. For example watch( is more efficient than watch( but functionally equivalent.


The dispatch function is responsible for running actions, for example:

<button onClick={() => dispatch(increment)(4)}>Click me!</button>

It takes as its only parameter the action to run, and the result is then called with the parameters of the action.


The transpiler detects a component as any function that uses the attributes exported from createModel, and is assigned to an upper-case identifier (lower-case identifiers are used for actions).

import { state, watch } from "./model";
export const Counter = props => (
<span>Hello, {watch(state.count)}!</span>

is converted to

import { model } from "./model";
export const Counter = model.connect(
({state}) => props => (
<span>Hello, {watch(state.count)}!</span>