Nucleus Powered Mitochondria

    iflux2
    TypeScript icon, indicating that this package has built-in type declarations

    1.4.5 • Public • Published

    New Idea, New the World. 🔥🔥🔥

    技术也是时尚驱动的,我们常常臣服于时尚,面对快速的变化常常让我们局促不安, 开始焦虑,唯恐错过了些什么。怎么打破这种焦虑?需要在快速变化得世界里保持清醒, 保持独立的思考和认知。 让我们回归到技术的本质, 因为解决了真实的问题,技术才变得有价值。 真正牛*的技术,都是静悄悄的跑在线上...

    iflux2 🚀🚀🚀

    NPM

    Reactive and Predictable state container for React or ReactNative.

    • Thanks Immutable.js
    • Thanks MapReduce
    • Thanks Functional Reactive Programming.

    iflux

    很早很早之前,我们爱上了React and immutable,所以就有了很简单的iflux。

    iflux = immutable.js + react.js

    NPM

    保持简单

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

    优点:

    • 简单直接,几乎没有什么规则
    • 单根数据源(single data source)
    • Immutable fronted UI
    • High Performance

    但是随着业务的不断的发展,数据层的复杂度也在上升。这时候iflux就会暴露出很多的缺点

    • Big Store, Store中大量的数据和业务的处理,代码膨胀的厉害
    • Store是单例,不销毁,有共享的问题
    • store的数据通过props不断的透传,代码写的很费劲
    • 大量的数据之间的依赖关系,需要手动的保证和处理

    怎么解决?

    • 使用MapReduce的理念解决big Store
    • 使用@Relax自动注入store中的数据和事件
    • Store不再是单例
    • 使用FRP的理念, 简单的实现反应式数据,抽象源数据和派生数据

    这就是我们的iflux2

    +------------------+
    |     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.js
     
    2 directories, 9 files
    //counter-actor.js
    import { Actor, Action } from 'iflux2'
     
     
    export default class CounterActor extends Actor {
      defaultState() {
        return {
          count: 0
        }
      }
     
      @Action('increment')
      increment(state) {
        return state.update('count', count => count + 1)
      }
     
      @Action('decrement')
      decrement(state) {
        return state.update('count', count => count - 1)
      }
    }
     
    //store.js
    import { Store } from 'iflux2'
    import CounterActor from './actor/counter-actor'
     
     
    export default class AppStore extends Store {
      bindActor() {
        return [
          new CounterActor
        ]
      }
     
      constructor(props) {
        super(props)
        if (__DEV__) {
          //you can use _store directly in browser's console
          window._store = this
        }
      }
     
      //;;;;;;;;;;;;;;;;;Action;;;;;;;;;;;;;;;;;;;;;;;;;;;;
      increment = () => {
        this.dispatch('increment')
      };
     
      decrement = () => {
        this.dispatch('decrement')
      };
    }
    //index.js
    import React, { Component } from 'react'
    import { render } from 'react-dom'
    import { StoreProvider } from 'iflux2'
    import AppStore from './store'
    import Counter from './component/counter'
     
    // debug: true 更多的console信息
    @StoreProvider(AppStore, {debug: true})
    export default class CounterApp extends Component {
      render() {
        return (
          <Counter/>
        )
      }
    }
     
    render(<CounterApp/>, document.getElementById('app'))
    //counter.js
    import React, { Component } from 'react'
    import { Relax } from 'iflux2'
    import { countQL } from '../ql'
    const noop = () => {}
     
     
    @Relax
    export default class Counter extends Component {
      static defaultProps = {
        count: 0, //Inject by store's count
        countQL,  //calculate by store's bigQuery
        increment: noop, //Inject by store's increment
        decrement: noop //Inject by store's decrement
      };
     
     
      render() {
        const { count, countQL, increment, decrement } = this.props
     
        return (
          <div>
            <a href='javascript:void(0);' onClick={increment}>increment</a>
            <br/>
            <span>{ count }</span>
            <br/>
            <span>{ countQL }</span>
            <br/>
            <a href='javascript:void(0);' onClick={decrement}>decrement</a>
          </div>
        )
      }
    }
    //ql.js
    import { QL } from 'iflux2'
     
    export const countQL = QL('countQL', [
      'count',
      (count) => `QL:${count}`
    ]);
     

    how to use?

    npm install iflux2 --save

    web

    //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

    //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.lock
     
    6 directories, 5 files
    //package.json
    "scripts": {
      "postinstall": "npm install ./react-dom"
    }

    react-native demo可以参考 https://github.com/QianmiOpen/iflux2/tree/master/examples/iflux2Native

    more examples

    Install

    npm i iflux2

    DownloadsWeekly Downloads

    11

    Version

    1.4.5

    License

    BSD

    Last publish

    Collaborators

    • hufeng