Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tur-nr/polymer-redux
Polymer bindings for Redux.
https://github.com/tur-nr/polymer-redux
bindings polymer redux web-component
Last synced: 4 days ago
JSON representation
Polymer bindings for Redux.
- Host: GitHub
- URL: https://github.com/tur-nr/polymer-redux
- Owner: tur-nr
- License: mit
- Created: 2015-09-23T13:49:30.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2022-12-07T01:05:09.000Z (about 2 years ago)
- Last Synced: 2024-12-29T03:10:17.271Z (11 days ago)
- Topics: bindings, polymer, redux, web-component
- Language: JavaScript
- Homepage: https://tur-nr.github.io/polymer-redux
- Size: 1.63 MB
- Stars: 440
- Watchers: 18
- Forks: 67
- Open Issues: 41
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# Polymer Redux
[](https://travis-ci.org/tur-nr/polymer-redux)
[](https://coveralls.io/github/tur-nr/polymer-redux?branch=master)
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
```bash
bower install --save polymer-redux
```
## Example
```javascript
// 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](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](LICENSE)
Copyright (c) 2017 [Christopher Turner](https://github.com/tur-nr)