Nybble Processing Mainframe

    polymer-redux

    1.0.5 • Public • Published

    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.

    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>)
    • 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(<name>, [args, ...])
    • name String, action name in the actions list.
    • arg... *, Arguments to pass to action function.

    Returns the action object.

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

    Returns the action object.

    #dispatch(<action>)
    • 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

    Install

    npm i polymer-redux

    DownloadsWeekly Downloads

    35

    Version

    1.0.5

    License

    MIT

    Last publish

    Collaborators

    • avatar
    • avatar