簡體   English   中英

Alt調度在調度時不觸發alt存儲方法(Flux)

[英]Alt actions not triggering alt store methods when dispatched (Flux)

我最近開始使用alt.js重寫一個磁通和反應應用程序,這使我可以在從服務器渲染時輕松地使用數據引導應用程序。

除了在客戶端分派動作后無法啟動存儲方法這一事實之外,其他所有工作都很好。

我的其中一個反應組件中的onClick事件調用了updateCurrentPostType動作。 在運行一些測試后,我可以確認我的Action和回調都被觸發但是商店似乎沒有采取任何措施。

我嘗試在我的商店構造函數中使用bindListeners和bindAction方法,但仍然沒有結果。

我知道這不是一個很大的問題,但我希望有一點使用alt經驗的人能夠看到我是否遺漏了任何重要的東西。

“alt”:“^ 0.14.5”

這是我的代碼。 謝謝你的時間。

PostTypeLink.jsx (反應組件,在loadPostType方法中調用的操作)

"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');

您必須實際上要求Store存儲在某處以便將其編譯為代碼並使其開始偵聽操作。 僅創建一家商店是不夠的。 簡單地要求它上面的PostTypeLink.jsx就足夠了。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM