2016-03-17 47 views
1

我最近開始使用alt.js改寫應用程序&,該應用程序允許使用數據從服務器呈現時輕鬆引導應用程序。在調度時不觸發alt存儲方法的替代操作(Flux)

除了事實上,其他所有工作都很好,除非我的存儲方法在客戶端發送操作時無法啓動。

動作updateCurrentPostType正在我的一個響應組件中從onClick事件中調用。運行一些測試後,我可以確認我的Action和回調函數正在被解僱,但商店似乎沒有選擇任何東西。

我試過在我的商店構造函數中使用bindListeners &但仍然沒有結果。

我知道這不是一個真正的問題,但我希望有更多經驗的人使用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'); 

回答

0

您必須實際需要將某個存儲位置編譯到代碼中並讓它開始監聽這些操作。僅僅創建一個商店是不夠的。簡單的要求上面的PostTypeLink.jsx應該就夠了。

+0

謝謝你回答這個問題。當我有機會時會更新我的代碼,並讓它知道它是否有效。 – MunkyMead

相關問題