Flux2#
Take it easy! Clean and simple to use Flux-implementation. Rethink of Flux.
Contents
-
Installation
-
Usage
-
waitFor()
-
Stores methods
-
WatchStoreMixin
-
Extra features
-
TODO
-
Installation
Using npm:
npm install flux2 --save
Using bower:
bower install flux2 --save
- Usage
There is example of full component (with the store and actions module). It contains 3 files:
- index.jsx
- actions.js
- store.js
index.jsx#####
var React = ;var store = ; var { return nodes: storestatenodes }; moduleexports = React;
actions.js#####
var Flux2 = ;var Dispatcher = Flux2Dispatcher; moduleexports = { Dispatcher; };
store.js#####
var Flux2 = ;var Dispatcher = Flux2Dispatcher; moduleexports = Flux2
- waitFor()
Use this feature when you want render components only when required data has been loaded.
index.js#####
'use strict';var React = ;var Flux2 = ;var Dispatcher = Flux2Dispatcher;var MainPage = ;var commentsActions = ;var commentsStore = ;var activeUsersActions = ;var activeUsersStore = ; Dispatcher;commentsActions;activeUsersStore;
- Store methods
According React paradigm Stores can contains those method:
- storeWillRegister()
- storeDidRegister()
- shouldStoreUpdate()
- willStoreUpdate()
- didStoreUpdate()
- storeWillUnregister()
- WatchStoreMixin
Mixin to make store watching a totally easy.
You can do it in a few lines:
...moduleexports = React
But that's not all. You can take a more control in this operation:
moduleexports = React
- Extra features
Don't like pub-sub pattern? Get and set state of your store with using special methods of Dispatcher:
// actions.jsmoduleexports = { // get state of the store var state = Dispatcher; // dispatch('setNodesState', ...) Dispatcher; }...
It's hard to add new items in this way? Ok, let's do it easier:
// actions.jsmoduleexports = { Dispatcher; }...
Would like to call method of store in the same way? It's easy:
// actions.jsmoduleexports = { var store = Dispatcher; if store store; else if console && consolewarn console; }...
Do you have SPA (Single Page Application) and have to create/destroy stores dynamically? Ok:
// store.js...moduleexports = { // something } { // something };...// component.jsx...var myStore = ; moduleexports = React
- TODO