polobx v0.2.0

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.

See the docs.

Table of Contents

1. Install
2. Usage

• Binding Properties
• State observers
• Dispatch Actions

3. Polobx API
4. License

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.