Hello, plume2.
import React, { Component } from 'react'
import {Actor,Store,StoreProvider,Relax,ViewAction} from 'plume2'
//MapReduce
class HelloActor extends Actor{
defaultState(){
return {text:"Hello,plume2"}
}
}
//reactive ui event 反应式ui事件
class AppViewAction extends ViewAction{
sayHello = (text:any) =>{
this.store.dispatch('say:hello',text)
}
}
// Single Data Source 繁多数据源
class AppStore extends Store{
//bind data transform 绑定数据转换
bindActor(){
//after plume2 directly pass Actor class 间接通过Actor类
return [HelloActor]
}
//bind ui event 绑定ui事件
bindViewAction(){
return {
AppViewAction
}
}
}
//Auto compute relaxProps 主动计算关上Props
@Relax
class Text extends React.Component{
static relaxProps = {
//auto injected by store.state().get('text') 由store.state().get('text')主动注入
text:"text",
//auto injected by store's bindViewAction 由store的bindViewAction主动注入
ViewAction:'viewAction'
}
_handleClick = () =>{
const {text,viewAction} = this.props.relaxProps
viewAction.AppViewAction.sayHello(text)
}
render(){
const {text,viewAction} = this.props.relaxProps;
return (
<div onClick={this._handleClick}>{text}</div>
)
}
}
@StoreProvider(AppStore) //应用程序入口
export default class Index extends Component {
render() {
return (
<div>
<Text/>
</div>
)
}
}
API Actor
Actor 计算模型，一个独立的计算单元，次要作用就是转换咱们的状态数据
import { Actor,Action} from 'plume2'
// 是的 这就是一个Actor简略世界
class HelloActor extends Actor{
// 畛域的初始数据 该数据会被主动的转换为immutable
defaultState(){
// 返回的对象会被主动的转化为immutable
// 除非有非凡数据结构如(set OrderedMap之类)
//不须要非凡指定immutable数据结构
return {text:'hello plume2'}
}
//** 通过@Action来建设store的dispatch和actor的handler(处理程序)之间的关联
// API标准
// @param state actor上一次的immutable状态
// @param text store dispatch的参数值 尽量放弃单值设计
@Action('change:text')
change(state,text){
// immutable api
return state.set('text',text)
}
}Store
什么是 Store?
Store 咱们的数据状态容器核心 治理着整个app的数据的生命周期
咱们坚守单根数据源的思维（single data source）,store 中放弃着残缺的业务与UI状态
Stor的主要职责：
1 聚合actor
2 分派actor(单分派 事务分派)
3 通过bigQuery 计算咱们的查询语言（QL/PQL）
4 响应页面的事件(ViewAction)
5 注册响应 RL
import {Store,ViewAction} from 'plume2'
import LoadingActor from 'loading-actor'
import UserActor from 'user-actor'
import TodoActor from 'todo-actor'
// 响应页面事件的逻辑解决
class AppViewAction extends ViewAction {
//show simple dispatch 显示简略分派
// when dispatch finished if status had changed, 如果状态已更改，则在调度实现时，
//each Relax component received message 每个组件都接管到音讯
update = () => {
//将计算的工作分派的到actor
//而后依据actor的返回值 重新聚合新的store的state
//该为单分派 当dispatch完结 store的state产生扭转的时候
//UI容器组件(StoreProvider,Relax) 会收到告诉从新re-render UI
this.store.dispatch('update')
}
// show multiple dispatch in a transaction 在事务中显示多个分派
save = () =>{
//事务分派
//很多场景下 计算应该是原子类型的 咱们想一想 dispatch 完结才告诉UI去re-render
//这个时候咱们就能够开启事务管制
// transaction 会返回值来判断在dispatch 过程中有没有产生谬误
// 如果产生谬误 数据会主动回滚到上一次的状态 防止脏数据
// 咱们也能够指定 自定义的回滚解决
// this.transaction(()=>{/*失常逻辑*/},()=>{/*自定义的回滚函数*/})
this.store.transaction(()=>{
this.store.dispatch('loading:end')
//这个中央能够失去上一次的dispatch之后的后果
//如：
const loading = this.state().get('loading')
this.store.dispatch('init:user',{id:1,name:'plume2'})
this.store.dispatch('save')
})
}
}
class AppStore extends Store{
// 聚合Actor
// 通过reduce各个actor的defaultState
// 聚合出store的state作为source data
bindActor(){
//plume2 间接传递Actor的class
return [LoadingActor,UserActor,TodoActor]
}
bindViewAction(){
return{
AppViewAction
}
}
}Store public-API
// 绑定须要聚合的Actor
bindActor(): Array<Actor | typeof Actor>
bindViewAction(): IViewActionMapper
// 事务管制dispatch
// dispatch: 失常逻辑
// rollBack: 自定义回滚逻辑 默认是主动回滚到上一次的状态
//返回是否产生回滚
transaction(dispatch:Dispatch,rollBack:RollBack):boolean;
// 计算QL
bigQuery(ql:QueryLang):any
// 以后store聚合的状态
state():IMap;
// 定义store状态更新告诉
subscribe(cb:Handler):void;
// 勾销订阅
unsubscribe(cb:Handler):void;
StoreProvider
StoreProvider 容器组件连接咱们的React组件和AppStore。向React组件提供数据源
在StoreProvider中的次要工作是：
1 初始化咱们的AppStore
2 将AppStore的对象绑定到React组件的上下文
3 Relay 就是通过上下文取的store对象
4 监听Store的state变动
情谊提醒：咱们还提供了 debug模式
开启debug 模式 咱们就能够对数据进行全链路跟踪
跟踪store的dispatch actor的解决 relax对QL的计算等
import React, { Component } from 'react'
import {StoreProvider} from 'iflux2'
import AppStore from './store'
//enable debug
@StoreProvider(AppStore,{debug:true})
class ShoppingCart extends Component{
render(){
return(
<Scene>
<HeaderContainer/>
<ShoppingCart/>
<BottomToolBarContainer/>
</Scene>
)
}
}Relax
Relax是plume2中十分重要的容器组件 相似Spring容器的依赖注入一样
外围性能会依据子组件的relaxProps中申明的数据，
通过智能计算属性的值 而后作为this.props.relaxProps透传给子组件
以此来解决React的props层层透传的verbose的问题
计算的规定
1 store 的state的值，间接给出值 得 immutable的门路,如 count:’count’,todoText:[‘todo’,1,’text’]
2 store 的method 间接和method同名就ok 如：destroy:noop, 咱们更心愿通过ActionCreator来独自解决UI的side effect
3 如果属性是’viewAction’ 间接注入store 中绑定的ViewAction
4 如果属性是QL 注入QL 计算之后的后果 如果PQL会主动绑定store的上下文
@Relax
export default class Footer extends React.Component{
static relaxProps = {
changeFilter:noop,
clearCompleted:noop,
count:countQL,
loadingPQL:loadingPQL,
filterStatus:'filterStataus',
viewAction:'viewAction'
}
render(){
const{
changeFilter,
clearCompleted,
count,
filterStataus,
viewAction
} = this.props.relaxProps
}
//...
}
QL/PQL
为什么咱们须要一个QL
1 咱们把store state 看成source data,因为UI展现的数据，可能须要依据咱们的源数据进行组合
2 咱们须要UI的数据具备reactive的能力 当source data变动的时候 @Relax 会去从新计算咱们的QL
3 命令式的编程手动的准确的解决数据之间的依赖和更新 Reactive会主动解决数据的依赖 然而同一个QL 可能会被执行屡次 造成计算上的节约
不过不须要放心 QL反对cache 确保path对应的数据没有变动的时候 QL 不会反复计算
QL = Query Lang
自定义查问语法 数据的源头是store的state返回的数据
Syntax QL(displayName,[string|array|QL…RelaxContainer,fn])
displayName,次要是帮忙咱们在debug状态更好的日志跟踪
string array QL:string array 都是immutable的get的path,QL其余的QL(反对无线嵌套)
fn:可计算状态的回调函数 bigQuery会获得所有的所有的数组中的path对应的值 作为参数传递给fn
// 返回:{
// id:1,
// name:'iflux2',
// address:{
// city:'南京'
// }
// }
store.state()
//QL计算的后果值是'iflux2南京'
const helloQL = QL('helloQL',[
'name',
['address','city'],
(name,city)=>`${name}${city}`
])
Store.bigQuery(helloQL)
发表回复