Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

🚀a lightweight React state container for web and app

License

NotificationsYou must be signed in to change notification settings

QianmiOpen/plume2

New Idea, New the World. 🔥🔥🔥

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

light-weight predict scalable framework React for web and mobile

NPM

Reactive and Predictable state container for React or ReactNative.

Features

  • Light-weight
  • Reactive
  • Predict
  • Scalable
  • Trace Data Flow

Thanks

  • React/Native
  • Immutable.js
  • MapReduce
  • 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 的理念, 简单的实现反应式数据，抽象源数据和派生数据

这就是我们的 plume2

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

Getting Started

# add dependenciesyarn add plume2# npm install plume2# webyarn add react react-dom# yarn add preact preact-compat

quick demo

//domain Object//Actor, Store, StoreProvider, Relax, ViewActionclassHelloActorextendsActor{defaultState(){return{text:'hello world'};}}classHelloViewActionextendsViewAction{sayHello=text=>{this.store.dispatch('say:hello',text);};}classAppStoreextendsStore{bindActor(){return[HelloActor];}bindViewAction(){return{      HelloViewAction};}}@RelaxclassTextextendsReact.Component{staticrelaxProps={text:'text',viewAction:'viewAction'};render(){const{ text, viewAction}=this.props.relaxProps;return(<divonClick={()=>viewAction.HelloViewAction.sayHello(text)}>{text}</div>);}}@StoreProvider(AppStore)classHelloAppextendsReact.Component{render(){return<Text/>;}}ReactDOM.render(<HelloApp/>,document.getElementById('app'));

contributes

thanks all(pr, issue)

document

plume2

FAQ

  1. TypeError: Class constructor Store can not be invoked without 'new'?

err

默认我们的 plume2 发布的模块级别是 es6，为了让我们调试方便，没有编译到 es5 的 level。这样在和 webpack 的配合的时候，webpack 一般在配置 babel-loader 的时候，会忽略 node_modules这样会导致我们业务代码编译级别是 es5,plume2 是 es6，就会报这个错误。

plume2@0.3.4 默认发布的就是 es5 module 不再需要提前的任意转换在 plume2@1.0.0 之后，默认发布的就是 es5 module，不在需要这种转换

  1. ReactNative can not find react-dom module

这是什么原因呢？因为我们的 store 模块依赖了 react-dom，在 react-native 的环境是没有 react-dom 这个模块，所以请使用我们的一个自定义的 babel 插件来解决问题。

yarn add babel-plugin-plume2 --dev
//.babelrc{"plugins":[["plume2",{"reactnative":true}]]}
[8]ページ先頭
©2009-2025 Movatter.jp