iflux

+-----------------------+|       WebApi          |+-----------------------+          |           \|/+-----------------------+|   Store（immutable）   |<-----++-----------------------+      |           | //es5 style       |           | StoreMixin        | msg(EventEmitter)          \|/                  |+------------------------+     ||     React App          |-----|+------------------------+|      <Layout>          ||        <SearchForm/>   ||        <Toolbar/>      ||        <DataGrid/>     ||       </Layout>        |+------------------------+

怎么解决?

+------------------+|     BFF-API      |+------------------+        ||        \/+------------------+|     WebApi       |+------------------+        ||        \/+------------------+|     Store        | ====> [Actor1, Actor2, Actor3]+------------------+        ||        \/+------------------+|  @StoreProvider  |+------------------+        ||        \/+------------------+|     @Relax       |+------------------+        ||        \/+------------------+|     QL/DQL       |+------------------+

例子

→ tree -L 2                                                                                              [c6c2861].├── actor│   └── counter-actor.js├── component│   └── counter.js├── index.html├── index.js├── package.json├── ql.js├── store.js├── webapi.js└── webpack.config.js2 directories, 9 files

//counter-actor.jsimport{Actor,Action}from'iflux2'exportdefaultclassCounterActorextendsActor{defaultState(){return{count:0}}  @Action('increment')increment(state){returnstate.update('count',count=>count+1)}  @Action('decrement')decrement(state){returnstate.update('count',count=>count-1)}}

//store.jsimport{Store}from'iflux2'importCounterActorfrom'./actor/counter-actor'exportdefaultclassAppStoreextendsStore{bindActor(){return[newCounterActor]}constructor(props){super(props)if(__DEV__){//you can use _store directly in browser's consolewindow._store=this}}//;;;;;;;;;;;;;;;;;Action;;;;;;;;;;;;;;;;;;;;;;;;;;;;increment=()=>{this.dispatch('increment')};decrement=()=>{this.dispatch('decrement')};}

//index.jsimportReact,{Component}from'react'import{render}from'react-dom'import{StoreProvider}from'iflux2'importAppStorefrom'./store'importCounterfrom'./component/counter'// debug: true 更多的console信息@StoreProvider(AppStore,{debug:true})exportdefaultclassCounterAppextendsComponent{render(){return(<Counter/>)}}render(<CounterApp/>,document.getElementById('app'))

//counter.jsimportReact,{Component}from'react'import{Relax}from'iflux2'import{countQL}from'../ql'constnoop=()=>{}@RelaxexportdefaultclassCounterextendsComponent{staticdefaultProps={count:0,//Inject by store's count    countQL,//calculate by store's bigQueryincrement:noop,//Inject by store's incrementdecrement:noop//Inject by store's decrement};render(){const{ count, countQL, increment, decrement}=this.propsreturn(<div><ahref='#"auto" data-snippet-clipboard-copy-content="//ql.jsimport { QL } from 'iflux2'export const countQL = QL('countQL', [  'count',  (count) => `QL:${count}`]);">
//ql.jsimport{QL}from'iflux2'exportconstcountQL=QL('countQL',['count',(count)=>`QL:${count}`]);

how to use?

npm install iflux2 --save

//web .babelrc{"presets":["es2015","react","stage-3"],"plugins":["transform-decorators-legacy",//required, 必须在class-properties之前！"transform-class-properties","transform-es2015-modules-commonjs","transform-flow-strip-types","transform-runtime"],"env":{"production":{"plugins":["transform-react-constant-elements","transform-react-inline-elements"]}}}

//react-native .babelrc{"presets":["react-native"],"plugins":["transform-decorators-legacy"]}

➜  Hello tree -L 1.├── __tests__├── android├── index.android.js├── index.ios.js├── ios├── node_modules├── package.json├── react-dom //拷贝这个react-native mock的react-dom├── tsconfig.json├── typings└── yarn.lock6 directories, 5 files

//package.json"scripts":{"postinstall":"npm install ./react-dom"}

more examples