flux-simple-action-creator

Super Simple Base Action Creator for Flux.

Installation

npm install --save flux-simple-action-creator

Usage

Basic

Use ES2016 (ES7) Decorators. You have to use like babel.js with babel --optional es7.decorators,es7.objectRestSpread or babel --stage 1.

// actions/FoodFighterAction.js
import SimpleActionCreator from 'flux-simple-action-creator';
import action from 'flux-simple-action-creator/action';
import Dispatcher from './dispatcher/AppDispatcher.js';


export class FoodFighterAction extends SimpleActionCreator {

  // Automatically insert `type` to method arguments
  // and register Symbol to class variables. (ex. FoodFighterAction.types)
  @action
  eat(type, food) {
    // assert(typeof type === 'symbol');
    // assert(type.toStirng() === 'Symbol(eat)');
    this.dispatch(type, {food});
  }

  // You can insert custom `type`, too.
  @action('foodFighter:reverse')
  reverse(type) {
    // assert(type === 'foodFighter:reverse');
    this.dispatch(type);
  }
}

export default new FoodFighterAction(Dispatcher);

// assert(FoodFighterAction.types.eat.toString() === 'Symbol(eat)');
// assert(FoodFighterAction.types.reverse.toString() === 'Symbol(reverse)');
// assert(FoodFighterAction.types.special === 'foodFighter:special');

// stores/FoodFighterStore.js
import {ReduceStore} from 'flux/utils';
import Dispatcher from './dispatcher/AppDispatcher.js';
import {FoodFighterAction} from './actions/FoodFighterAction';


export class FoodFighterStore extends ReduceStore {
  initialState() {
    return {stomach: []};
  }

  // structure of dispatched action from SimpleActionCreator is {type: {Symbol|string}, data: {any}}
  reduce(state, action) {
    switch (action.type) {
    case FoodFighterAction.types.eat:
      state.stomach.push(action.food);
      break;
    case FoodFighterAction.types.reverse:
      state.stomach = [];
      break;
    }
    return state;
  }
}

export default new FoodFighterStore(Dispatcher);

// dispatcher/AppDispatcher.js
import {Dispatcher} from 'flux';

export class AppDispatcher extends Dispatcher {};
export default new AppDispatcher();

More Simple (no use decorator)

// actions/FoodFighterAction.js
import SimpleActionCreator from 'flux-simple-action-creator';
import Dispatcher from './dispatcher/AppDispatcher.js';


export class FoodFighterAction extends SimpleActionCreator {
  eat(food) {
    this.dispatch('foodFighter:eat', {food});
  }

  reverse() {
    this.dispatch('foodFighter:reverse');
  }
}

export default new FoodFighterAction(Dispatcher);

// stores/FoodFighterStore.js
import {ReduceStore} from 'flux/utils';
import Dispatcher from './dispatcher/AppDispatcher.js';


export class FoodFighterStore extends ReduceStore {
  initialState() {
    return {stomach: []};
  }

  reduce(state, action) {
    switch (action.type) {
    case 'foodFighter:eat':
      state.stomach.push(action.food);
      break;
    case 'foodFighter:reverse':
      state.stomach = [];
      break;
    }
    return state;
  }
}

export default new FoodFighterStore(Dispatcher);

// dispatcher/AppDispatcher.js
import {Dispatcher} from 'flux';

export class AppDispatcher extends Dispatcher {};
export default new AppDispatcher();

More detail, See Doc.