README
Using with React
Local component state
useModel( ModelClass ) hook
useCollection.of( ModelClass ) hook
class State = attributes({
counter : 0
});
const StatefulComponent = () => {
const state = useModel( State /* any model class */ );
return (
<button onClick={ () => state.counter++ }>
{ state.counter }
</button>
);
}
class Counter = attributes({
counter : 0
});
const StatefulComponent = () => {
const counters = useCollection.of( Counter );
const selected = useCollection.subsetOf( counters );
return (
<div>
<div>{ user.counter }</div>
<button onClick={ () => user.counter++ }>Add</button>
</div>
}
Data binding
Linked class
useLinked( value ) hook
const StatefulDataBound = () => {
// Obtain linked local state.
const $name = useLinked( '' );
return (
<div>
<input {...$name.props} />
</div>
)
}
model.$
@define class Book extends Model {
static attributes = {
name : '',
author : ''
}
}
const EditBook = ({ book }) => {
// Obtain linked model attributes.
const { name, author } = book.$;
return (
<div>
<input {...name.props} />
<input {...author.props} />
</div>
)
}
collection.$includes( model )
Linked.value( value, set ) static
Normalized data and stores
Store
is the subclass of Model
used as a root to resolve id-references in 'normalized data structures', when
the data is represented as a set of collections with items referencing each other by id. If you don't have normalized data structures, you don't need Store
.
Attributes of types Model.memberOf( 'store.someCollection' )
and Collection.subsetOf( 'store.someCollection' )
will resolve model ids to the models taken from someCollection
belonging to the closest Store
model. The closest
store is located as follows:
- The first
Store
from the model's owners chain is taken first. - If there are no such a collection in it, the next
Store
class in ownership chain is taken. - If there are no stores left in the ownerhip chain, the
Store.global
is used.
From the particular model's view, there's a single store
namespace which is defined by Store.global
and
extended by upper stores in its ownership chain.
In @type-r/react
, you can create the store as a local component state, and expose it down to the component subtree
so its children can opt to use this context store for id resolutions in their local state models.
That leads to a multi-tier store achitecture where the next tier store may override upper store collections and extend it with new collections.
- Tier 1.
Store.global
holds the state which is shared across all SPA pages. - Tier 2. Page component stores holds the state which is related to particular pages.
- Tier 3. Particular components might add their local stores extending the namespace created by upper stores.
Stores
const X = () => {
const state = useModel( State );
useContextStore( state );
}