📋 @folo/store
A Plain JavaScript Store Holds & Helps Controlling Data In Forms
Installation
npm install @folo/store
A store that holds data and triggers the connected components to update their values when necessary. Designed to deal optimally with forms.
How this is going to affect your UI performance?
Instead of re-mount, all elements exist in the form. This approach guarantees that only controlled elements in the UI will be triggered. This is important because usually global store and in most cases means to update all associated elements.
Getting started
Create a shared registry for your app. No matter how many forms you have, You need one registry instance.
import Registry from "@folo/store";
const registry = new Registry();
API
Subscribe
- Subscribe your elements to the registry:
registry.subscribe(subscribeInfo: Object<SubscribeInfo>, triggerHandler:? Function);
Where SubscribeInfo: Object
an object contains:
-
nameRef: string
- key reference to the element value. -
initValue: StoreValue
- Initial value for the element. -
groupName?: string
- Only for button group. -
storeID?: string
- In case you are running multiple forms, this value creates umbrella branch for you form.
And triggerHandler: Function
- Triggered when local value needs to be
updated. This is strict to group buttons only.
Example for subscribe
const btn1Info = {
nameRef: "btn1",
initValue: false,
groupName: "choices",
};
const btn1Handler = (newValue) => {
console.log(`I am triggered when my siblings value change! ${newValue}`);
};
registry.subscribe(btn1Info, btn1Handler);
const btn2Info = {
nameRef: "btn2",
initValue: true,
groupName: "choices",
};
const btn2Handler = (newValue) => {
console.log(`I am triggered when my siblings value change! ${newValue}`);
};
registry.subscribe(btn2Info, btn2Handler);
// ...
registry.subscribe(text1Info, btn2Handler);
registry.subscribe(text2Info, btn2Handler);
updater
- Update value in the registry and triggered handlers if necessary:
registry.updater(updaterInfo: Object<UpdaterInfo>);
Where updaterInfo: Object
an object contains:
-
nameRef: string
- key reference to the stored element. -
newValue: StoreValue
- The new value for the element. -
groupName?: string
- Only for button group. -
storeID?: string
- In case the element is registered under store id.
What's going to happen is updating store values and trigger handlers for all buttons boolean values under the same group name toggling their values.
Example for updater
- Receive new value:
const btn2NewInfo = {
nameRef: "btn2",
newValue: true,
groupName: "choices",
};
registry.updater(btn2NewInfo);
//
registry.updater(text1NewInfo);
registry.updater(text2NewInfo);
So, btn1Handler
will be triggered with false
. Why? Since we updated btn1
and btn2
values, UI should be informed to re-render.
This is the only case when functions are triggered. Otherwise. data flow will be from UI to the store until submit is asking for all elements values.
getDataByStoreID
- Get store data
registry.getDataByStoreID(storeID?: string): Object<StoreInfo>
clear
- Clear store data
registry.clear(storeID?: string)
destroy
- Reset the whole registry
registry.destroy();
Test
yarn test folo-store
Implementation
- With react: folo-values
😇
Contribution If you have ideas or issues don't hesitate. You are always welcome.
License
This project is licensed under the MIT License