Coder Social home page Coder Social logo

crapkit / polymer-redux Goto Github PK

View Code? Open in Web Editor NEW

This project forked from tur-nr/polymer-redux

0.0 2.0 0.0 559 KB

Polymer bindings for Redux.

Home Page: https://tur-nr.github.io/polymer-redux

License: MIT License

JavaScript 66.47% HTML 33.53%

polymer-redux's Introduction

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>)
  • 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

polymer-redux's People

Contributors

cvanleeuwen avatar dam0vm3nt avatar itsdouges avatar kpgarrod avatar kristfal avatar kritollm avatar krozycki avatar mkorenko avatar petrkrulis avatar rickymarcon avatar ronnyroeller avatar timeu avatar tom5om avatar tur-nr avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.