reaxes

What's This

reaxes的设计哲学是:应用的逻辑应该与其他模块解耦,特别是视图和用户输入

• 此库可以让你以响应式编程思维来构建你的应用的核心逻辑,无论是web前端还是nodejs,只要宿主环境支持Proxy即可以运行.
• 将复杂的业务逻辑从视图组件中抽离, 数据和逻辑将在应用的任何地方可用,而不再是组件和hooks中了.
• 跨视图同构你的应用,一套逻辑,可以在react,vue中轻易通用而不用修改任何组件代码.甚至native app , web , 小程序中都可以通用,只需要根据宿主环境做些判断.

注意:1.x.x大版本并不稳定,每个中间版本号增加都意味着api可能会修改或删除

Installation

$ npm i -S reaxes

Documents

https://kane-7.gitbook.io/reaxes-document

Playground

• Tic-Tac-Toe React

Using reaxes to build core logic of your app

// reaxels/counter.ts
import { createReaxable , obsReaction } from 'reaxes';

export const reaxel_Counter = reaxel(() => {
	//create a reactive store , so you can subscribe changes when you need.
	const { store , setState , mutate } = createReaxable({
		count : 0,
	});
	
	return Object.assign(() => {
		return {
			get count(){
				return store.count;
			} ,
			setCount( count: number ){
				setState({ count });
			} ,
		};
	} , {
		store ,
		setState ,
		mutate ,
	});
});

Using with vallina JS

// when count changed, refresh DOM
import { reaxel_Counter } from './reaxels/counter';
import { obsReaction } from 'reaxes';

function render(){
   const { count , setCount } = reaxel_Counter();
   
   const div = document.createElement('div');
   div.onclick = () => setCount(count + 1);
   div.innerText = count;
   return div;
}

//listen store.count , once it changes,render() will be re-runed automatically
obsReaction(
   ( first , dispose ) => {
      document.write(render());
      if(first){
         console.log('div element mounted');
      }
   } ,
   //place all observable props here
   () => [ reaxel_Counter().count ]
);

using with React

// there is no need to use obsReaction for every component
// because reaxper will do this automaticlly
// all you need is just to wrap you components with reaxper();
import { reaxper } from 'reaxes-react';
import { reaxel_Counter } from './reaxels/counter';

// functional component
export const Count = reaxper(() => {
   const {count,setCount} = reaxel_Counter();
   
   return <div onClick = { () => setCount(count+1) }>
      count:{ count }
   </div>;
});

// or use class component
import { Component } from 'react';

@reaxper
class CountComponent extends Component {
   
   render(){
      const {count,setCount} = reaxel_Counter();
      
      return <div onClick = { () => setCount(count+1) }>
         count:{ count }
      </div>;
   }
}

using with Vue2

<template>
   <div @click="setCount()">
      {{ count }}
   </div>
</template>
<script>
   import { reaxel_Counter } from './reaxels/counter';
   
   export default {
      status(){
         const {count} = reaxel_Counter();
         return { count };
      },
      methods:{
         setCount(){
            const {count,setCount} = reaxel_Counter();
            setCount(count+1);
         }
      }
   }
</script>

pre { tab-size: 3; }