polymer-redux

by tur-nr

tur-nr /polymer-redux

Polymer bindings for Redux.

452 Stars 72 Forks Last release: almost 3 years ago (v1.0.3) MIT License 173 Commits 17 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Polymer Redux

Build Status Coverage Status

Polymer bindings for Redux. Bind store state to properties and dispatch actions from within Polymer Elements.

Polymer is a modern library for creating Web Components within an application. Redux is a state container for managing predictable data. Binding the two libraries together allows developers to create powerful and complex applications faster and simpler. This approach allows the components you build with Polymer to be more focused on functionality than the applications state.

Polymer 3

Polymer 3 is currently under beta release, checkout: https://github.com/tur-nr/polymer-redux/tree/dev/v2.x

Installation

bower install --save polymer-redux

Example

// Create a Redux store
const store = Redux.createStore((state = {}, action) => state)

// Create the PolymerRedux mixin const ReduxMixin = PolymerRedux(store)

// Bind Elements using the mixin class MyElement extends ReduxMixin(Polymer.Element) { static get is() { return 'my-element' }

connectedCallback() {
    super.connectedCallback();
    const state = this.getState();
}

}

// Define your Element customElements.define(MyElement.is, MyElement)

Now

MyElement
has a connection to the Redux store and can bind properties to it's state and dispatch actions.

Documentation

See the documentation page: https://tur-nr.github.io/polymer-redux/docs.

API

PolymerRedux

new PolymerRedux()
  • store
    Object, Redux store.

Returns a

ReduxMixin
function.

Redux Mixin

These methods are available on the instance of the component, the element.

#getState()

Returns current store's state.

#dispatch(, [args, ...])
  • name
    String, action name in the actions list.
  • arg...
    *, Arguments to pass to action function.

Returns the action object.

#dispatch()
  • fn
    Function, Redux middleware dispatch function.

Returns the action object.

#dispatch()
  • action
    Object, the action object.

Returns the action object.

Events

state-changed

Fires when the store's state has changed.

License

MIT

Copyright (c) 2017 Christopher Turner

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.