npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

iflux2

v1.4.5

Published

Reactive state container (based on immutable) for React or ReactNative, inspired by mapreduce.

Downloads

17

Readme

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

  • https://github.com/hufeng/iflux2-blog
  • https://github.com/hufeng/iflux2-todo
  • https://github.com/hufeng/iflux2-counter
  • https://github.com/brothers-js/iflux2-validator-demo