kwik-e-mart
Another flux implementation. Based on the excellent Alt
Usage
actions
Actions trigger sets in stores and are your main means of broadcasting an intended state change to one or more stores. They are akin to triggering a global event.
Creating actions
Use the createActions()
api to create a set of actions. All action method bodies have access to this.dispatch()
which will send off the current action to the dispatcher.
var kwikemart = var userActions = kwikemart
The example above is extremely common and straightforward, all it does is pass the user
object on to any stores listening to the updateUser
action. You can streamline this process by using the helper api generateActions(arrayOfActions)
which will create an object of simple 'pass through' actions like the one above.
var kwikemart = var userActions = kwikemart
Since generateActions
just returns an object, you can combine these actions creation methods with Object.assign
or the "spread" operator if you are using babel, or some other modern javascript transpiler.
var kwikemart = // creates an `updateUser` and a `saveUser` actionvar userActions = kwikemart
action context
You can also reference other actions inside an action to compose and combine actions by using this.actions
.
var kwikemart = var userActions = kwikemart
action asynchrony
Another common pattern when persisting changes back to a server is to dispatch the current object immediately so stores can optimistically update and then fire success and failure variants of hte action when the api request finishes.
var kwikemart = var userActions = kwikemart
kwik-e-mart makes this simplier by automatically creating success
and failure
actions for each action you create, they are available inside an action with this.success
and this.failure
or from outside an action like userActions.updateUser.success
(more on that in the store section)
var kwikemart = var userActions = kwikemart
Stores
Stores are the locale for application state in a flux app
Creating stores
You can create stores as a plain old object or as a 'class' using es6 class syntax or any other form of prototypal inheritance patterns. With kwik-e-mart you don't instansiate stores yourself but pass them to createStore
and get back an instance.
You configure stores to listen or 'bind' to specific actions. Binding a store to an action allows it to respond when that action is fired by the dispatcher.
To bind an action just pass it to the bindAction
api along with the string name of method that will handle it. From an action handler you can update the stores state
in much the same way you would a React Component's state. When a store's state is updated with setState
it will emit a change and any listening view components can refetch store info to render with the updated data.
var kwikemart = var userActions = { this thisstate = users: } // -- getters { return thisstateusers } { return _ } //---------------------- { this } var userStore = kwikemart userActions // Now the store will create the user userStore // returns all usersuserStore // returns a single user
You can also bind all actions to a store by using bindActions
which is a convenient alternative to using multiple bindAction
calls.
var kwikemart = var userActions = { // bind all userActions to a method of the same name this } //-- handlers { // update code... } { // update code... } { // update code... } { // create code... } var userStore = kwikemart userActions // Now the store will create the user userStore // returns all usersuserStore // returns a single user
For cases where you want to bind multiple different actions to a single store handler there is an inverted api for doing that: bindListeners()
{ this } { // success code... } { // failure code... }
All stores are given as dispatchToken
which they can pass to store.waitFor()
in order to handle inter store dependencies.