uni-corn
This project is still very much a work in progress
Uni directional data flow library that keeps everything really simple!
Create stores to seperate data from differnt parts off the application
Each store comes with get
, set
and getAll
actions out of the box.
When you create a new Store()
you are creating an event that will get fired everytime you set a value or call a custom action in that store. This will then call any callbacks that you have subscribed
to this store.
Installation
$ npm install uni-corn --save
Example.
import Store from 'uni-corn';
const myStore = new Store('myStore');
function myCallback(prop) {
console.log('Store has changed');
console.log(myStore.get(prop));
}
myStore.subscribe(myCallback);
myStore.set('myProp', 'my prop value');
Usage
Create a New Store
const myStore = new Store('myStore', defaultProps);
Create a new store with an optional argument for default props. Useful if
you have to set an inital state on components in react.
Set
Sets a value in the store. this will cause the main store event to be fired calling any callbacks that you have subcribed to the store, unless you have specified in the third argument to not autoupdate by passing false
.
set(key, value, autoUpdate, persist)
set('foo', 'bar');
Arguments
- key (required)
- Type:
String
- Purpose: The name of the property you wish to store
- value (required)
- Type: Any
- Purpose: The value of the property you wish to store
- autoUpdate
- Type:
Boolean
- Default value:
true
- Purpose: Whether the stores main event is fired
- persist:
- Type:
Boolean
|| String
- Default value:
false
- Purpose: If
true
The value will be stored in localStorage and automatically retrieved by get
. If the persist value is the String
"session"
the value will be stored in sessionStorage and only persist as long as the browser session.
Get
Retrieves a value stored against the provided key
, Where key
is a String
.
get(key)
get('foo');
This will return persisted values as well as ones stored only in memory.
Subscribe
Adds a callback to be called when the store changes.
function myCallback(state) {
console.log(`${state} in store has changed`);
}
myStore.subscribe(myCallback);
Unsubscribe
Removes the callback from the store. it will no longer be called when the store changes.
function myCallback(state) {
console.log(`${state} in store has changed`);
}
myStore.unsubscribe(myCallback);
The callback subscribes to the store and will be called when the main event is triggered.
The callback accepts one argument, state
, the value of state
will depend on what triggered the update:
- If
Store.set()
was called, the value of state
will be the name of the prop that was set. - If
Store.forceUpdate('value')
was called the value of state
be the value that was passed as forceUpdates
first argument - If a fetch action was called that did not have a prop name assigned then the value of
state
will be the reponse body of the fetch.
A suggested way to use this effectively would be to add a switch statement to your callback to decide on what actions to take depending on what state
is passed to the callback
function myCallback(state) {
switch(state) {
case 'name':
this.setState('name', myStore.get('name'));
break;
case 'success':
window.location = '/success-page';
break;
}
}
Add a Custom Action - Store.addAction
Custom actions can be created if the default get, set and getAll are not adequate.
addAction takes an optional third argument autoUpdate
which defaults to false. If set to true then the default store event will be fired when the action is called.
Custom actions can be asynchronous. Simply include this.forceUpdate()
within the body of the callback. forceUpdate()
takes one optional agument, a String
this will be passed to any subscribing callbacks as the first argument.
**Note: the callback added to addAction must not be an arrow function. Internally uni-corn uses Function.bind()
to set the context.
function myAction() {
console.log('Do something');
setTimeout(_ => {
this.forceUpdate('myAction-updated');
}, 2000);
}
myStore.addAction('myAction', myAction[, autoUpdate]);
myStore.actions.myAction();
Forms - Store.addForm
Creates everything you need to create a form in react.
can either create and call a fetch action to submit the form or pass the for to a custom action letting that custom action handle the event firing.
const options = {
action: 'submit-login',
fields: [
{name: 'username', required: true},
{name: 'password', required: true}
]
};
myStore.addForm('loginForm', options);
### Input - `Store.addInput`
Creates a single input providing a value and onChange function that will update the value and trigger the Store event.
### Add Fetch Action
```javascript
const myFetchAction = {
url,
method,
body,
onSuccess,
onError
}
myStore.addFetchAction('myFetchAction', myFetchAction);