rebels v0.1.4
rebels
Flux simplified.
Finding action creators and dispatchers too confusing? rebels
takes away that complexity by exposing a minimal API surface area for you and abstracting away the details.
Store
Expose your actions via constants, subclass Store
to add your application logic and listen for actions via listenForAction(type, (payload) => {})
:
import {Store} from 'rebels';
export const INCREMENT_THE_COUNT = Symbol('INCREMENT_THE_COUNT');
class TheStore extends Store {
constructor() {
super();
this._count = 0;
this.listenForAction(INCREMENT_THE_COUNT, (payload)=>{
console.log(payload);
let {amount} = payload;
this._count += amount;
this.emitChange();
});
}
get count() {
return this._count;
}
}
export default TheStore.defaultStore;
Components
Subclass Component
, then register your store updates with updateFromStore(store, callback)
:
import React from 'react';
import {Component} from 'rebels';
import store, {INCREMENT_THE_COUNT} from './../stores/TheStore';
export default class TheButton extends Component {
constructor() {
super();
this.state = {
count: 0
};
this.updateForStore(store, () => {
this.setState({
count: store.count
});
});
}
render() {
return <button onClick={()=>{
this.dispatchAction(INCREMENT_THE_COUNT, {amount:1});
}}>Hello {this.state.count}</button>
}
}
Actions
Simply use dispatchAction(type, payload)
from either your Store
or Component
. We recommend having a single store listening for your action, but you can place action type constants
in a centralized location if you have multiple stores.
Handling API requests
We recommend triggering your network request from the store responsible for storing that data. You can dispatch an action when your requests completes.
License
rebels
is under the MIT license.