cq-dispatcher

Flux command query action creator.

An common query responsibility segregation action creator for 'flux-like' architecture. (Redux as an example)"

Install

npm install --save-dev cq-dispatcher

Usage

//reducers.js
import { combineReducers } from 'redux'
import { success, fails } from 'cq-dispatcher'

let reducer_name = {
  ['LOAD']: (state, action) => {
	  //load begin
  },
  [success('LOAD')]: (state, action) => {
	  //load success
  },
  [fails('LOAD')]: (state, action) => {
	  //load fails
  },
  ['TOGGLE']: (state, action) => {
	  //toggle
  }
}

export default combineReducers({
  reducer_name
})


// actions.js
import Vue from 'vue'
import { createStore } from 'redux'
import Revue from 'revue'
import CQDispatcher from 'cq-dispatcher'

import reducer from './reducers'

let webapi = {
	'LOAD': function (next_page_id) {
		ajaxlib.get('http://example.com', { next_page_id })
			.then(this.resolve, this.reject)
	}
}

const actions = new CQDispatcher(
	new Revue(Vue, createStore(reducer)), webapi)

export default actions


//vue
<script>
import actions from '../actions'

export default {
	data () {
		return {
			items: this.$select('reducer_name as items')
		}
	},
	mounted () {
		if (!this.items) {
			actions.Query('LOAD', 'next_page_id')
		}
	},
	methods: {
		toggle (index) {
			actions.Command('TOGGLE', index)
		}
	}
}
</script>