Skip to content

Instantly share code, notes, and snippets.

@tannerlinsley

tannerlinsley/counter-example.js

Last active August 1, 2016 21:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tannerlinsley/ee83e749cb142291e4638cb717af96cb to your computer and use it in GitHub Desktop.
Save tannerlinsley/ee83e749cb142291e4638cb717af96cb to your computer and use it in GitHub Desktop.
Download ZIP
Raw
counter-example.js
// Yep, that's all you have to import
import { Render, State, Component } from 'jumpsuit'
// Create a state and with some actions
const CounterState = State('counter', {
// Initial State
initial: { count: 0 },
// Actions
increment (state, payload) {
return { count: ++state.count }
},
decrement (state, payload) {
return { count: --state.count }
},
})
// Create a component
const Counter = Component({
render() {
return (
<div>
<h1>{ this.props.counter.count }</h1>
<Button onClick={ this.increment }>Increment</Button>
<Button onClick={ this.decrement }>Decrement</Button>
</div>
)
},
increment(){
// Dispatch state actions
CounterState.increment()
},
decrement(){
// Dispatch state actions
CounterState.decrement()
},
}, (state) => ({
// Subscribe to the counter state (will be available via this.props.counter)
counter: state.counter
}))
// Render your app!
Render({counter: CounterState}, <Counter/>)
Raw
index.html
<html>
<head>
<title>Jumpsuit Example</title>
</head>
<body>
<div id="app"></div>
<script src="app.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment