ivanrod / Polobx
Programming Languages
Projects that are alternatives of or similar to Polobx
Polobx
State manager for Polymer based on MobX.
Uses the Monostate Pattern such that any instance with the behavior will share the same state.
Inspired by tur-nr/polymer-redux & flux.
You can see an example app here.
Table of Contents
Install
With bower:
$ bower install --save polobx
Usage
Use the createPolobxBehavior
factory method to create the behavior. This will give the behavior access to the bindings:
my-state.html
<link rel="import" href="../bower_components/polobx/polobx.html">
<script type="text/javascript">
var myStore = {
model: {
foo: 'bar'
},
actions: {
changeFoo: function(newFoo) {
this.model.foo = newFoo;
}
}
};
var myOtherStore = {
model: {
counter: 0,
xxx: {
xx: 'x'
}
},
actions: {
addOne: function() {
this.model.counter++;
}
}
};
window.PolobxBehavior = createPolobxBehavior(
{
myStore: myStore,
myOtherStore: myOtherStore
}
);
</script>
Binding Properties
With your PolobxBehavior
you can bind your state to properties of your elements.
Use statePath
field in your property to define the store and path you want to bind to it:
my-view.html
<link rel="import" href="my-state.html">
<dom-module id="my-view">
<template>
...
<p>My element var: [[myVar]]</p>
...
</template>
<script>
Polymer({
is: 'my-view',
behaviors: [PolobxBehavior],
properties: {
myVar: {
type: String,
statePath: {
store: 'myStore',
path: 'foo'
}
},
myOtherVar: {
type: String,
statePath: {
store: 'myOtherStore',
path: 'xxx.xx'
}
}
}
});
</script>
</dom-module>
State Observers
Define a stateObservers
field in your component with a list of observers of your state:
<link rel="import" href="my-state.html">
<dom-module id="my-view">
<template>
...
<p>My colors counter: [[myColorsCounter]]</p>
<p>My foo: [[myFoo]]</p>
...
</template>
<script>
Polymer({
is: 'my-view',
behaviors: [PolobxBehavior],
stateObservers: [
// Store path observer
{
store: 'myStore',
path: 'colors',
observer: function(colors) {
if (colors.length > 4) {
this.set('myColorsCounter', 'We have more than 4.')
}
}
},
// Store observer
{
store: 'myStore',
observer: function(state) {
if (state.foo === 'bar') {
this.set('myFoo', 'My foo is actually bar.')
}
}
}
],
properties: {
myColorsCounter: String,
myFoo: String
}
});
</script>
</dom-module>
Dispatch actions
Using PolobxBehavior
you can use dispatch()
inside your element to dispatch a defined action of your store:
my-other-view.html
<link rel="import" href="my-state.html">
<dom-module id="my-other-view">
<template>
...
<button on-click="changeOtherViewVar">X</button>
...
</template>
<script>
Polymer({
is: 'my-other-view',
behaviors: [PolobxBehavior],
changeOtherViewVar: function() {
this.dispatch({
store: 'myStore',
action: 'changeFoo',
payload: 'OtherBar'
})
}
});
</script>
</dom-module>
Polobx API
Behavior API
dispatch({store:string, action:string, payload:any})
Dispatch an action to a defined store.
Returns the action result.
Example:
this.dispatch({
store: 'myStore',
action: 'changeFoo',
payload: 'OtherBar'
});
// -> <Action Result>
getStateProperty(store:string, path:string)
Get a field/property of the selected store.
Returned value is just a copy of the store property, you can only modify it when dispatching an action.
Example:
this.getStateProperty('myStore', 'foo');
// -> 'bar'
Test
Run:
npm run test
License
MIT © ivanrod.