frill-core
Core part of frill.
Usage
$ npm install frill-core --save
Examples
Basic Actions
Simply extend BaseAction
.
import {BaseAction} from 'frill-core'; class ExampleAction extends BaseAction { constructor() { super(); } // count up countUpBy(count = 1) { // dispatch action to store this.dispatch('COUNT_UP_BY', count); }}
Action Services
Services are helpers to use inside actions.
import {BaseAction} from 'frill-core'; // add a new service called 'newService'BaseAction.addService('newService', (options) => { return 'something';}); class ExampleAction extends BaseAction { constructor() { super(); // use a service this.use('request', {prefix: '/api'}); // this.use('socket', {url: 'http://localhost:3000'}); // this.use('newService', options); } actionMethod() { // throws a request to '/api/test' this.request.prefix.get('/test', (err, res) => { if(err) console.error(err); console.log(res.text); }); }
Built-in services
socket
(socket.io-client)request
(superagent)
Additional options for built-in services
Service | Options | Explanation |
---|---|---|
socket |
options.url (Required) |
An url of the socket server. |
request |
options.prefix (Optional) |
Prefixes paths to send a request via this.request.prefix.get('/test') , etc. |
Basic Stores
Simply extend BaseStore
.
import {BaseStore} from 'frill-core'; class ExampleStore extends BaseStore { constructor() { super(); this._count = 0; // listens to an action this.actions = { 'COUNT_UP_BY': 'countUpBy', }; } // Triggered when COUNT_UP_BY is dispatched by an action. countUpBy(byCount = 1) { this._count = this._count + byCount; // emit change this.change(); } // getter for current count get count() { return this._count; }}
Context
Context ties up actions and stores together.
To create a context, provide an object of actions and an object of stores to the attach
method of frill-core.
You can access to stores using Context.store('storeName')
or Context.stores.storeName
.
You can access to actions using Context.action('actionName')
or Context.actions.actionName
.
You can access a dispatcher, via Context.dispatcher
.
import frillCore from 'frill-core'; // object of actionsconst actions = { ExampleAction: new ExampleAction(), // ExampleAction2: new ExampleAction2(), // ...}; const stores = { ExampleStore: new ExampleStore(), // ExampleStore2: new ExampleStore2(), // ...}; // Create contextconst Context = frillCore.attach(stores, actions);
Components
BaseComponent
Simply extend BaseComponent
.
BaseComponent will enable users to have access to this._bind()
,
and this.getFrill()
.
Method names specified in this._bind()
will automatically bind methods with this
, to use in the render()
method without .bind(this)
.
this.getFrill()
will return a context.
import React from 'react';import {BaseComponent} from 'frill-core'; class CountButtonComponent extends BaseComponent { constructor(props) { super(props); // bind methods this._bind([ 'onClick', ]); } // click handler onClick(e) { e.preventDefault(); // execute an action this.getFrill().action('Example').countUpBy(1); } render() { return ( <button onClick="this.onClick">+1</button> ); }}
StoreWatchComponent
Extend a new instance of StoreWatchComponent
, and give the name of store to watch.
A StoreWatchComponent
will listen to stores, and execute getStateFromFrill()
when a change is emitted from a store.
NOTE: An instance of StoreWatchComponent
extends BaseComponent
import React from 'react';import {StoreWatchComponent} from 'frill-core'; class TopComponent extends new StoreWatchComponent(['Example']) { constructor(props) { super(props); } // fetch state when a store emits change getStateFromFrill() { return { count: this.getFrill().store('Example').count, }; } render() { return ( <div>{this.state.count}</div> ); }}
Run tests
$ npm test
License
MIT