alt.js 使用教程

1.action :

import alt from "../alt.js";

class DemoActions{
    constructor() {
        this.generateActions(
                'updateTodo',
                'updateTestData'//注册action名字
            )
    }
}


export default alt.createActions(DemoActions)

2.store:

import alt from "../alt.js"

import DemoActions from "../_action/demo.js";
class DemoStore{
    constructor() {
        this.bindListeners({
            updateTodo:DemoActions.updateTodo,
            updateTestData:DemoActions.updateTestData//在store中绑定对应的action名字
        })
        /*this.state={
            todos:'465456'
        }*/
        this.todos='4654654654654'; //这里是注册的store数据,会有事件操作行为来改变这些数据从而改变view
        this.testData='skfjsdkljfksdjfksdjf';
    }
    updateTodo(todo){   //store中的事件促发相应的数据改变
        console.log(todo,'store todo')
        this.todos=todo[0];
    }
    updateTestData(todo){
        this.testData=todo[0];
    }
}

export default alt.createStore(DemoStore)

3.view:

import alt from "./alt.js";
import connectToStores from 'alt-utils/lib/connectToStores';
import React,{Component} from "react";
import {render} from "react-dom";
import DemoStore from "./_store/demo.js"; //store和action需要引进来到view中使用
import DemoAction from "./_action/demo.js";

@connectToStores  //联系到alt
class Demo extends Component{
    static getStores(){
        return [DemoStore]; //引入需要的store
    }
    static getPropsFromStores(){
        return DemoStore.getState(); //绑定store到组件的props,这样就可以在view中访问props来访问store的数据
    }
    constructor(props) {
        super(props);
    }
    render(){
        let ramdomData=Math.random()*100;
        return(
            <div>
                <div onClick={DemoAction.updateTestData.bind(DemoAction,ramdomData)}>{this.props.testData}</div>  //this.props.testdata 方式来访问store中的数据
                <div onClick={DemoAction.updateTodo.bind(DemoAction,'我是上看到房价是打飞机')}>{this.props.todos}</div>//这里可以看到促发alt的action来改变对应的store的数据和view的数据变化
            </div>
            )
    }
}


render(<Demo/>, document.querySelector('#app'))