duxter is a small 1kb and simple centralized state management for Javascript applications.
Influences
Dux provides more control of your application state. It's envolve ideas of ReDuxter and Flux, but explores all power of Promises, doing the work with async action easy.
Getting Started
Install
- Npm:
npm install duxter
- Bower:
bower install duxter
- CDN:
https://unpkg.com/duxter@0.0.1
Features
- small 1kb minified & gzipped
- simple, small learning curve
- immutable
- promise based
- inspired on ReDuxter
- tiny API.
The Gist
The application state is stored in an object tree inside a single store.
You can receive the result of your action using .then
after your dispatch
call.
That's it!
; /** * Set your store state in a single object. */ /** * Set your store state in a single object, * that always receive the store state as first argument. */ { const count = return type: 'INCREMENT' value: count + value } /** * You can use subscribe() to update your UI in response to state changes. * `${this}` can be your UI component, where the subscribe handler will be applied. */ /** * The only way to mutate the internal state is to dispatch an action. * You can receive the response of your action and do something, or not. */// 2; // 3;// 4 console // 1
Simple and efficiently API.
Dispatch
- Trigger some action for do something. A Promise will be returned, that contain an Object with the
keysaction
andvalue
of your correspondent action response.
/** * @name dispatch * @description Trigger some action. * @param * @param { arguments } Arguments You can pass the arguments after the actionName * @return * of the action and the action name. * {value, action} = data; */ // On your component; // You can receive the response of your action and do something, or not.// If you whant, you can chaining the dispatch Promises. ;
Actions
- Actions are payloads of information that send data from your application to your store. They are the only source of information for the store. You send them to the store using store.dispatch().
Store State
- Set the application Store state
/** * @name setState * @description Set you application store state * @param */ ; ;
Getting the Store State
- Get a state value of your store
/** * @name getState * @description Get the state value */ ; ; // returns a copy of your store state
Middleware
- Set a middleware function, that will be triggered after the action calls.
/** * @name middleware * @description Get the state value * @param * you use the dispatch method. Receives your payload */ ;
Subscribe/Unsubscribe
- Subscribe some UI Component for trigger the handler function when some action are trigger.
- Unsubscribe when you don't wnat to trigger the handler function.
/** * @name subscribe * @description Subscribe some UI Component for trigger the handler function when some action calls. * @param { object } BindComponent The UI element that the handler function will be applied. * @param { handler } handler Your function that will be triggered when some state change. */ ; { // when some state change, do something. ; } { // remove this component for observe the changes on the state }
License
MIT License.