egoist
2/3/2016 - 3:36 AM

esnextbin sketch

esnextbin sketch

transpiled.js
content_copyfile_download
'use strict';

var _revue = require('revue');

var _revue2 = _interopRequireDefault(_revue);

var _redux = require('redux');

var _vue = require('vue');

var _vue2 = _interopRequireDefault(_vue);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

// create a counter reducer
var counter = function counter() {
  var state = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0];
  var action = arguments[1];

  switch (action.type) {
    case 'increment':
      return state + 1;
    case 'decrement':
      return state - 1;
    default:
      return state;
  }
};

// action creators
// write ES2015 code and import modules from npm
// and then press "Execute" to run your program
var actions = {
  increment: function increment() {
    return { type: 'increment' };
  },
  decrement: function decrement() {
    return { type: 'decrement' };
  }
};

// combine reducers
// and create the redux store
var reduxStore = (0, _redux.createStore)((0, _redux.combineReducers)({ counter: counter }));
// create a revue store by binding redux store to Vue
var store = new _revue2.default(_vue2.default, reduxStore, actions);

new _vue2.default({
  el: '#app',
  data: function data() {
    return { count: this.$select('counter as count') };
  },

  methods: {
    handleIncrementA: function handleIncrementA() {
      // dispatch an action which is plain object
      store.dispatch({ type: 'increment' });
    },
    handleIncrementB: function handleIncrementB() {
      // dispatch an action creator which returns an object
      store.dispatch(actions.increment());
    },
    handleIncrementC: function handleIncrementC() {
      // binded actions
      var increment = store.actions.increment;

      store.dispatch(increment());
    }
  }
});
package.json
content_copyfile_download
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "revue": "2.1.0",
    "redux": "3.2.1",
    "vue": "1.0.16"
  }
}
index.js
content_copyfile_download
// write ES2015 code and import modules from npm
// and then press "Execute" to run your program
import Revue from 'revue'
import {createStore, combineReducers} from 'redux'
import Vue from 'vue'

// create a counter reducer
const counter = (state = 0, action) => {
  switch(action.type) {
    case 'increment':
      return state + 1
    case 'decrement':
      return state - 1
    default:
      return state
  }
}

// action creators
const actions = {
  increment() {
    return {type: 'increment'}
  },
  decrement() {
    return {type: 'decrement'}
  }
}

// combine reducers
// and create the redux store
const reduxStore = createStore(combineReducers({counter}))
// create a revue store by binding redux store to Vue
const store = new Revue(Vue, reduxStore, actions)

new Vue({
  el: '#app',
  data() {
    return {count: this.$select('counter as count')}
  },
  methods: {
    handleIncrementA() {
      // dispatch an action which is plain object
      store.dispatch({type: 'increment'})
    },
    handleIncrementB() {
      // dispatch an action creator which returns an object
      store.dispatch(actions.increment())
    },
    handleIncrementC() {
      // binded actions
      const {increment} = store.actions
      store.dispatch(increment())
    }
  }
})
index.html
content_copyfile_download
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ESNextbin Sketch</title>
  <!-- put additional styles and scripts here -->
</head>
<body>
  <!-- put markup and other contents here -->
  <div id="app">
    <button @click="handleIncrementA">{{count}}</button>
    <button @click="handleIncrementB">{{count}}</button>
    <button @click="handleIncrementC">{{count}}</button>
  </div>
</body>
</html>
esnextbin.md
content_copyfile_download
  • Rendered
  • Source

made with esnextbin