/**

 * IMPORTANT ***************************************************************

 * 

 * This example uses the global version of RxJS that includes ALL operators.

 * Inside your app, you will likely need to import the operators you use or

 * import all of them in your index.js entry file.

 * 

 * Learn more about this: http://goo.gl/4ZlYeC

 */

​

console.clear();

​

// redux/modules/ping.js

​

const PING = 'PING';

const PONG = 'PONG';

​

const ping = () => ({ type: PING });

​

const pingEpic = action$ =>

  action$.ofType(PING)

    .delay(1000) // Asynchronously wait 1000ms then continue

    .mapTo({ type: PONG });

​

const pingReducer = (state = { isPinging: false }, action) => {

  switch (action.type) {

    case PING:

      return { isPinging: true };

​

    case PONG:

      return { isPinging: false };

​

    default:

      return state;

  }

};

​

// redux/store

const { createStore, applyMiddleware } = Redux;

const { createEpicMiddleware } = ReduxObservable;

​

const epicMiddleware = createEpicMiddleware(pingEpic);

​

const store = createStore(pingReducer,

  applyMiddleware(epicMiddleware)

);

​

​

// vue/component.js

​

Vue.component('vue-ping', {

  template:`

    <div>

      <h1>is pinging: {{ isPinging }}</h1>

      <button @click="ping">Start PING</button>

    </div>

  `,

  methods: {

    ping: function(){

      store.dispatch(ping());

    }

  },

  subscriptions(){

    return {

      isPinging: Rx.Observable.from(store)

        .map( state => state.isPinging )

    };

  }

});

​

​

// vue/app.js

​

new Vue({el: '#app'});