event-flux
Last updated
Last updated
event-flux is a modular predictable state container for JavaScript apps.
Predictable - helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.
Modular - event-flux
contain many stores that act the specific role, such as userStore
that handle the user information, tradeStore
handle the trade specific features. In a standard event flux app, we will create many stores that related to the specific business. Those stores contain the owned state that specified to the store's business by this.state
like React
.
Event Driven - The stores that have different functions will be driven by event, so different stores decouple from each other.
Single Data Flow - Like flux and other flux like framework, event-flux
only flow data from Store
to UI Components.
Lazy Load - Every Store
(like MVC's module) will be loaded and initialized only when UI Component need and can be optional disposed when UI Component don't need it.
Dependency Inject - Use dependency inject to declare one store's dependencies with other stores.
event-flux is the flux-like store management. It manage the complex states and links in those stores and make the view respond to the state change easily.
event-flux contains the following objects:
Store: The state container like MVC's model that contain the specific functions.
State: Every store will contain the owned state and this store can change the state by method.
AppStore: The container of Store. It manage the life cycle of the stores and control the initialization sequence.
There are many stores in a large scale event-flux
application, so the AppStore will contain the store tree. AppStore also collect the store's states to the state tree, so the view can get the full state tree to render like Redux
.
event-flux use the event-emitter style to notify other stores and components that the store state has changed.
require the package by
Refer the doc event-flux.
define Stores
First, define some stores that your app need. Store is the class extends StoreBase
and contains the state.
The Store
can set the initialization state in constructor
function and add some action methods that change the store's state by setState
.
Then, create some React component just like before.
Then, create some PureComponent
that observe the store's state change and connect
the root store to the container component with withEventFlux
.
In the above code, withEventFlux
import the todoStore
and all of the state of todoStore
to TodoApp
component by Filter.FA
. The argument of withEventFlux
is the object where key is the store key that will be required and value is the state filter. In the above code snippet, the store todoStore
will be loaded and injected the TodoApp
and the Filter.FA
mean the state of todoStore
will all filter to this component.
The TodoApp
will observe the full state tree. When the todoStore
state changes, AppStore
will forward the state of todoStore
to TodoApp
so the TodoApp's props will be changed and the TodoApp
component will render self.
This app create AppStore instance with TodoStore declarer. The declareStore
will declare the Store and set some options such as storeKey
. The store declarer will not create the store instance, it only declare the Store class. In this code snippet, we declare TodoStore
Store class. The Store will be instantiated when UI needed by withEventFlux
.
More examples can refer to event-flux examples.