分派时 Alt 操作不触发 alt 存储方法 (Flux)

Question

我最近开始使用 alt.js 重写 Flux & react 应用程序，这使我可以在从服务器渲染时轻松地使用数据引导应用程序。

除了在客户端分派操作时我无法让我的商店方法触发这一事实之外，其他一切都很好。

动作updateCurrentPostType 是从我的一个反应组件中的onClick 事件中调用的。运行一些测试后，我可以确认我的 Action 和回调都被触发了，但商店似乎没有收到任何东西。

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

我知道这不是一个真正的问题，但我希望有更多使用 alt 经验的人能够查看我是否遗漏了任何重要的内容。

"alt": "^0.14.5"

这是我的代码。感谢您的宝贵时间。

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 就足够了。