Reevent
Reevent is the flux-like store management. It manage the complex links in those stores and make the view respond to the store change easy.
How it run
Reevent contains the following objects:
-
Store: the state container that like MVC's model.
-
StoreApp: the store management container. It manage the life cycle of the stores and control the initialization sequence.
-
VMComponent or PureVMComponent: just like
React
Component or PureComponent but add some methods that can obseve the store's state change.
Reevent use the event-emitter style to notify other stores and components that the store state has changed.
Install the package
npm install reevent --save
require the package by
const StoreBase VMComponent PureVMComponent ReeventProvider ReeventApp = ;
How to use
define Stores
First, define some stores that your app need. Store object is the class extends StoreBase
and contains the state.
The Store
class contains constructor
function that set the initialization state and some action methods that change the store's state by setState
.
; { super; thisstate = key todos: ; } { let todos = thisstatetodos; this; }
define AppStore
Then, create class AppStore
that init the stores.
{ thistodoStore = 'reevent-todos'; return this; } {}
loadInClient
will run the initialization method in browser and loadInServer
will run the initialization function in server.
define React Component
Then, create some React component just like before.
{ superprops; thisstate = editText: propstodotitle ; }
define some VM Components
Then, create some VMComponent
that observe the store's state change.
{ superprops; thisstate = nowShowing: ALL_TODOS editing: null newTodo: '' ; thistodoStore = contextreeventApptodoStore; } { this; }
The TodoApp
will observe the todoStore
state. When the todoStore
state changes, the TodoApp's onStateChange
method will be invoked and the TodoApp
component's state will be changed.
Render the DOM
;;; const reeventApp = ; ReactDOM;
More info can refer to example/todoMVC/