shriflux v1.1.1
Shriflux - Simple flux implementation
Flux
view -> action -> dispatcher -> store
^ < - - - - - - - - - - - - - - - -
How to run development mode
npm i
npm start
How to make build
npm run build
How to test
npm test
API
Effect
It's abstract thing, that describes how a store should effects on a new action in Dispatcher.
Dispatcher
The dispatcher is the central hub that manages all data flow in a Flux application. It holds all effects, that we have in application and calls them, when got a new action.
// create dispatcher for your application for getting start
const appDispatcher = new Dispatcher();
Dispatcher.register(storeEffect: StoreEffect)
Register storeEffect inside
Dispatcher.dispatch(action: IAction)
Dispatch a new action to all registered storeEffects
Store
Store holds data and notifies subscribers, when data inside was changed.
// Create store for user data
const initialData = {
name: "Shriflux",
description: "one another flux implementation"
};
const userStore = new Store({
initialData
});
Store.getData: () => IStoreData
returns current store data
Store.updateData: (updatedFieldsData: object) => IStoreData
update store's data fields and notifies subscribers, that something in store was changed
Store.subscribe: (callback: SubscriberCallback) => SubscriptionId
subscribe callback and new changes inside store
Store.unsubscribe: (id: SubscriptionId) => boolean unsubscribe callback from changes of store
Example of flow
// Create application dispatcher
const appDispatcher = new Dispatcher();
// Create store for user data
const initialData = {
name: "Shriflux",
description: "one another flux implementation"
};
const userStore = new Store({
initialData
});
// Create userStoreEffects for processing dispatcher actions
const userStoreEffects = (action: Types.IAction): void => {
switch (action.type) {
case "USER_LOGIN":
userStore.updateData({
login: true,
loginTime: action.payload.time
});
break;
default:
break;
}
};
// Subscribe on store updates
const storeSubscriber = () => {};
userStore.subscribe(storeSubscriber);
// Register storeEffects
appDispatcher.register(userStoreEffects);
// Dispatch new action
appDispatcher.dispatch({
type: "USER_LOGIN",
payload: {
time: 0
}
});