flux-easy
Flux applications have a beautiful architecture but a ugly code. This project propose a transpiler write a better and simple code that generate it. additionally flux-easy facilities using of multiple references to Stores/Views.
Install flux-easy
$ npm install flux-easy
Enabling flux-easy
; // fake module that define Store and View fake classes
Defining Stores
Store { thisprop1 = null; // Store state thisprop2 = 0; } { return thisprop1; // You can you getState or add specific get methods } { // automatic creation of dispatcher and callbacks for actions thisprop1 = p1; thisprop2 = p2; this; //write any name changes }
Defining Views
View // will define a React.Class { thisstore_ref= STORE_NAME; // automatic reference to stores/views thisprop3=''; // view state thisstore_ref; // simplification of listenners from this.emit('YourChange') // in the store } { var prop1=thisstore_ref; // getting partial store state with specific method var prop2=thisstore_refprop2; // get full store state with getState() var prop3=thisstateprop3; // get view state, attention to valueLink automation return <div> <div>prop1 prop1</div> <div>prop2 prop2</div> <div>prop3 prop3</div> <input type="text" placeholder="prop3" valueLink=thisstateprop3 /> //edit value in input update in this.state.prop3 automatic <button onClick=thisdispatch_action>Dispatch action1</button> </div> ; }
Transpiling
flux-easy src/file.jsx bin/file.jsx
Use automation tools like grunt, gulp, webpack...
See sample project at https://github.com/thr0w/flux-easy-loader-test
Using generated code
var dispatcher=;var view_ref = VIEW_NAME; // you just need call oncevar View_Class = view_refClass; React;