what-happened v1.0.0-alpha
what-happened
Install
npm i what-happened --save
createDispatcher() => dispatcher
The dispatcher
allows you to notify different parts of your application that an event occured.
import { createDispatcher } from 'what-happened';
const dispatcher = createDispatcher();
dispatcher.subscribe(eventHandler) => unsubscribe
Subscribe to future dispatched events. Returns a function that unsubscribes from future events. Don't forget to unsubscribe!
const unsubscribe = dispatcher.subscribe((event) => {
switch (event.type) {
case 'ALERT': return alert(event.message);
default: return console.warn(`${event.type} not handled`);
}
});
dispatcher.dispatch(event)
Dispatches an event
to all subscribers. An event
is a plain object with a type
property.
const button = document.createElement('button');
button.innerText = 'Yo!';
button.addEventListener('click', () => dispatcher.dispatch({
type: 'ALERT',
message: 'Yo!',
}));
document.body.appendChild(button);
dispatcher.createStore(reducer, initialState) => store
A store
manages the state of your application (or component). When an event
occurs, the store
updates it's state
and notifies it's subscribers. The reducer
is a function that takes the previous state
and the dispatched event
and returns the next state
(default = (state = [], event) => event
). Your store can be created with an initialState
(default = undefined
).
import { createDispatcher, createStore } from 'what-happened';
const dispatcher = createDispatcher();
const store = dispatcher.createStore((state, event) => {
if (event.type === 'RESIZE') {
return {
width: event.width,
height: event.height,
};
}
return state;
});
store.subscribe(handler)
Subscribe to future state changes.
const div = document.createElement('div');
document.body.appendChild(div);
store.subscribe(() => {
const { width, height } = store.getState();
div.innerText = `window size = ${width}x${height}`;
});
const handleResize = () => dispatcher.dispatch({
type: 'RESIZE',
width: window.innerWidth,
height: window.innerHeight,
});
window.addEventListener('resize', handleResize);
handleResize(); // trigger initial resize
store.destory()
Destroying the store will unsubscribe all subscribers and ignore future dispatched events. Destroy your store when it is no longer needed.
7 years ago
7 years ago