material-flux
No magic flux implementation library.
- Less trick
- No method swizzle, No overwrite function
- IDE Readable API(Machine Readable API)
- Debuggable
- ECMAScript6 compatible
- Class syntax
Installation
npm install material-flux
Usage
material-flux is consist of Action
, Store
and Context
.
Flux Architecture
User action -> Action
-> Context
dispatch -> Store
received dispatch
-> Store dispatch "change"
event -> View received the "change". -> update view.
Context
providedispatch
function toAction
s.Context
register store for dispatched event.Action
dispatch event.Store
received dispatched event with data.Store
dispatch "change" event when update state in the store.
Action
// it's a like constantsconst keys = // "any key" : "any value" "doSomething": "unique value"; { // pass the `data` to Store's `onHandler` // call `onHandler(data);` this; }
When you call action, dispatch store's handler.
Store
{ super...args; thisstate = userData: null ; this; } // data is come from Action { this; } // just getter method { return thisstateuserData; }
Store#onChange(listener)
Adds a listener to the end of the listeners array for the "change" event.
listener
is afunction
.
Store#removeChangeListener(listener)
Removes a "change" listener.
listener
is afunction
.
Store#removeAllChangeListeners()
Removes all "change" listeners.
Store#getState()
Return state object that shallowly clone store's state
.
Store#setState(object)
Update this.state
and emit "change" event.
object
is any object.
Context
How to connect Action and Store?
=> Create connection object. it is called Context
in this context.
; { super; thisuserAction = this; thisuserStore = this; }
View(Component)
How to connect to View like React?
=> Pass an instance of Context
to React's Component.
;;;var context = ;React;
AppComponent:
;Component { super...args; thisuserStore = thispropscontextuserStore; thisstate = userData: thisuserStore ; } { this; } { thisuserStore; } { thisuserStore; } { var context = thisprops; contextuserAction; } { return <div onClick=thisonClick> userData: thisstateuserData </div> ; }
Examples
more examples.
Tests
npm test
# it run mocha & npm run test:typing.
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D
License
MIT
Inspiration and thanks
- Flummox
- Andrew Clark acdlite@me.com