Actionizer

This is just pub/sub for data flow like Redux.

Overview

  Command -> (Web API)
    ^  _________|
    |  v
   Action -> Command -> (Reducer) -> Store -> View
     ^                                         |
     |_________________________________________|

Dependencies

babel-polyfill for ES2015 generator.

Installation

$ npm i --save actionizer

Usage

import 'babel-polyfill';
import axios from 'axios';
import { fromJS } from 'immutable';
import { createStore } from 'actionizer';
import { select, call, reduce, fork, cancel, delegate } from 'actionizer/commands';
import debounce from 'lodash.debounce';
 
const initialState = fromJS({
  counter: 0,
  items: {
    1: {id: 1, name: 'hoge'},
    2: {id: 2, name: 'fuga'}
  }
});
 
// Customize notifier.
const notify = debounce((emit) => { emit(); });
 
// Create "Store", it treats states for the app.
const store = createStore(initialState, notify);
 
// Define "Reducer"
const setCount = (state, num) => state.set('counter', num);
 
// Define "Action Creator".
const count = function*(num) {
  // Get current state.
  const state = yield select();
 
  // Update state by "Reducer"
  yield reduce(setCount, num);
}
 
// API request.
const getItems = (id, field) => {
  return axios.get('/items', {id, field});
};
 
// Define asynchronous "Action Creator".
const fetchItems = function*(id, field) {
  try {
    // "call" receives a function and arguments that returns a promise.
    const result = yield call(getItems, id, field);
 
    // Do something...
  } catch(e) {
    // Do something...
  }
}
 
const sleep = (ms) => {
  return new Promise((resolve) => {
    setTimeout(() => { resolve(); }, ms);
  });
};
 
// Define debounced "Action Creator".
const debouncedFetchItems = function*(id) {
  yield call(sleep, 1000);
  // Delegate other action creator
  yield delegate(fetchItems, id);
}
let actionId;
const searchItemsById = function*(id) {
  yield cancel(actionId);
  actionId = yield fork(debouncedFetchItems, id);
}
 
// Subscribe store's change.
const unsubscribe = store.subscribe((state) => {
  console.log(`listener: ${state.get('counter')}`);
});
 
// Dispatch "Action".
store.dispatch(count(100));
 
// => listener: 100
 
// Unsubscribe store's change.
unsubscribe();

API

Top level API

createStore(initialState, notify)

Create a store.

compose(...funcs)

Composes functions from right to left.

Store API

subscribe(listener)

Register a listener of store's changes. And it returns unsubscriber.

dispatch(action, callback)

Trigger an action. In Actionizer, "Action" is a generator like:

// This is "Action Creator"
const count = function*(num) {
  yield reduce(setCount, num);
}
 
// This is "Action"
const action = count(1);

getState()

Get store's state.

Command API

"Command" return a payload used in "Action Creator".

select(selector = (state) => state)

select calls selector with current state, and return selector result.

reduce(reducer, ...args)

reduce updates state by result of reducer.

call(fn, ...args)

call calls fn with args. fn should return Promise. call returns resolved value.

fork(actionCreator, ...args)

fork calls an action without blocking and returns action id. Action id is unique.

delegate(actionCreator, ...args)

delegate delegates process to other action by calling action creator.

cancel(actionId)

cancel cancels action by action id.

Related projects

• react-actionizer

LICENSE

MIT