Question

我最近开始重写助焊剂＆amp;使用alt.js对应用程序做出反应，这使我可以在从服务器渲染时轻松地使用数据引导应用程序。

除了在客户端调度动作时我无法触发我的存储方法这一事实之外，其他所有工作都很有效。

我的一个反应组件中的updateCurrentPostType事件正在调用操作onClick。在运行一些测试后，我可以确认我的动作和回调都被解雇但是商店似乎没有采取任何措施。

我尝试过使用bindListeners＆amp;我的商店构造函数中的bindAction方法，但仍然没有结果。

我知道这不是一个问题，但是我希望有人在使用alt方面有更多经验可以看出我是否遗漏了任何重要内容。

＆＃34; alt＆＃34;：＆＃34; ^ 0.14.5＆＃34;

这是我的代码。谢谢你的时间。

PostTypeLink.jsx （React组件，在loadPostType方法中调用的Action）

"use strict";

var React = require('react');
var Router = require('react-router');
var PostTypeActions = require('../../../actions/postTypeActions');

var PostTypeLink = React.createClass({

    contextTypes: {
        router: React.PropTypes.func
    },

    getInitialState: function() {
        return this.props.postType;
    },

    loadPostType: function(e) {
        e.preventDefault();

        var self = this;
        var postTypeName = this.props.postType.info.posttype_name;

        PostTypeActions.updateCurrentPostType(postTypeName, function() {

            self.context.router.transitionTo('/admin/content/'+postTypeName);
        });
    },

    render: function() {
        var postTypeName = this.props.postType.info.posttype_name;

        return (
            <li key={this.props.key}>
                <a href="#" onClick={this.loadPostType}>
                    <i className="fa fa-book fa-fw"></i> {_.startCase(postTypeName)}
                </a>
            </li>
        );
    }
});

module.exports = PostTypeLink;

PostTypeActions.js

"use strict";

var alt = require('../alt');
var request = require('superagent');

class PostTypeActions {

    loadAllPostTypes(cb) {
        var self = this;

        request
        .get('/api/v1/posttypes')
        .end(function(err, res) {
            if (err) {
                console.log('Request Failed: '+err);
            } else {
                var response = JSON.parse(res.text);

                self.actions.updatePostTypes(response);

                if (cb) {
                    cb();
                }
            }
        });
    }

    updatePostTypes(postTypes){
        this.dispatch(postTypes);
    }

    updateCurrentPostType(postTypeName, cb){
        console.log('updating current post type');
        this.dispatch(postTypeName);

        if (cb) {
            cb();
        }
    }
}

module.exports = alt.createActions(PostTypeActions);

PostTypeStore.js

"use strict";

var alt = require('../alt');
var PostTypeActions = require('../actions/PostTypeActions');

class PostTypeStore {

    constructor() {
        var self = this;

        this.bindListeners({
            updatePostTypes: PostTypeActions.updatePostTypes,
            updateCurrentPostType: PostTypeActions.updateCurrentPostType
        });

        this.on('init', function() {
            self.postTypes = [];
            self.currentPostType = null;
        });
    }

    updatePostTypes(postTypes) {
        this.postTypes = postTypes;
        this.emitChange();
    }

    updateCurrentPostType(postTypeName) {
        var self = this,
            _postTypes = this.postTypes;

        for (var i = 0; i < _postTypes.length; i++) {
            if ( _postTypes[i].info.posttype_name == postTypeName ) {
                console.log(_postTypes[i]);
                self.currentPostType = _postTypes[i];
                self.emitChange();
            }
        }
        console.log('THIS METHOD WONT FIRE!!!!');
        console.log(self.currentPostType);
    }
}

module.exports = alt.createStore(PostTypeStore, 'PostTypeStore');

Answer 1

您必须实际上要求Store存储在某处以便将其编译为代码并让它开始侦听操作。仅创建商店是不够的。简单地要求它上面的PostTypeLink.jsx就足够了。

＆＃xA;

Alt调度在调度时不触发alt存储方法（Flux）

1 个答案: