Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Using Cell with Redux
<html>
<script src="https://www.celljs.org/cell.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.7.0/redux.min.js"></script>
<script>
function items(state = [], action) {
switch (action.type) {
case 'ADD':
return state.concat(action.value)
case 'CLEAR':
return []
default:
return state
}
}
var store = Redux.createStore(items)
function body(store) {
return {
$cell: true,
type: 'body',
style: "font-family: Helvetica; font-size: 14px;",
$components: [
{
$type: "input",
type: "text",
placeholder: "Type something and press enter",
style: "width: 100%; outline:none; padding: 5px;",
$init: function () { this.focus() },
onkeyup: function (event) {
if (event.keyCode === 13) {
store.dispatch({
type: 'ADD',
value: this.value,
})
this.value = ''
}
}
},
{
$type: "button",
type: "text",
$text: 'Clear',
onclick: function (event) {
store.dispatch({
type: 'CLEAR',
})
}
},
{
$type: "ol",
id: "list",
_items: [],
$components: [],
$init: function () {
var that = this
store.subscribe(function () {
var items = store.getState()
if (items !== this._items) {
that._items = items
}
})
},
$update: function () {
this.$components = this._items.map(function (item) {
return { $type: "li", $text: item }
})
}
}
]
}
}
var element = body(store)
</script>
</html>
@davidbonnet

This comment has been minimized.

Copy link
Owner Author

@davidbonnet davidbonnet commented Jun 24, 2017

Unsubscribing from stores requires some sort of $deinit callback, as outlined here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment