[英]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.