This is just pub/sub for data flow like Redux.
Command -> (Web API)
^ _________|
| v
Action -> Command -> (Reducer) -> Store -> View
^ |
|_________________________________________|
babel-polyfill for ES2015 generator.
$ npm i --save actionizer
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();Create a store.
Composes functions from right to left.
Register a listener of store's changes. And it returns unsubscriber.
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);Get store's state.
"Command" return a payload used in "Action Creator".
select calls selector with current state, and return selector result.
reduce updates state by result of reducer.
call calls fn with args.
fn should return Promise.
call returns resolved value.
fork calls an action without blocking and returns action id.
Action id is unique.
delegate delegates process to other action by calling action creator.
cancel cancels action by action id.
MIT