Troublete Elements: Redux

A small redux behavior binding for Polymer, optimized for observing and propgating simple property changes. It is created for small applications that don't have a complex or multi-dimmensional state.

Install

$ npm i -S troublete-elements-redux

Setup

The polymer behavior factory is located in the te-redux.html file. Since the purpose of the behavior is to be as modular as possible, it is necessary to setup a little structure to be able to really use the binding.

First and formost it is necessary to create a wrapper integration (like shown in the example file te-redux-integation-demo.html). The integration MUST contain a redux reducer specification, a redux store creation & the factory call of the behavior to be used later in components.

After the setup of the frame integration, simple add an html-import to your component as shown in the example file te-redux-demo.html.

After that you'll be able, so easy listen to state changes or propagate them.

API

Since the behavior uses the polymer event backbone to handle state changes here explained how you can listen and dispatch state changes.

listen

Listening itself is pretty straight forward, it is possible to add a listener to the listeners property of your polymer component. For a specific property change in the form of state-change:[PROPERTY_NAME], e.g. for a property with the key name the event name would be state-change:name.

dispatch

Also the dispatching is pretty simple, the behavior comes with a handy method called publish.

• publish([PROPERTY_NAME], [NEW_PROPERTY_VALUE])
  • PROPERTY_NAME (String)
  • PROPERTY_VALUE (object)

Calling the method in a function will cause a state change and set the new property value. (!) It isn't possible to set a "new" property, which isn't registered in the state. The behavior will in this case throw an error.