在组件中利用spinJS的Flux/ReactJS

我使用flux架构与reactjs。我正在尝试实现控制显示spinjs旋转器。

这是我的组件视图，它正在使用旋转控件:

var ItemListing = React.createClass({
    render: function(){
        if (this.state.loading === true) { 
            return (
                <div className="pill-pane active item-list-pane">
                        <LoadSpin />
                </div>
            )
        }
        // .. more non-related logic here
        return (
            <div className="pill-pane active item-list-pane">
                { items }
                <Paginator
                    paginationClickHandler={ this.paginationClickHandler }
                    offset={ offset }
                    limit={ limit }
                    store={ AppStore }
                />
            </div>
        );
    },
    getInitialState: function(){
        return {
            items: AppStore.getAssetDetails().assetList
        };
    },
    componentWillMount: function(){
        AppStore.addChangeListener(this.changeHandler);
        AppStore.addChangeListener(this.toggleActivity);
    },
    componentDidMount: function(){
        this.setState({loading: false});
        AppActions.queryAssets();
    },
    toggleActivity: function() {
        this.setState({loading: true});
    }
});

如componentWillMount所示，我添加了这个。toggleActivity，它最终将加载状态设置为true。然后在componentDidMount中，我将加载状态设置为false。但由于某种原因，我的转轮一直在不停地旋转。也就是说，像这样布局时，它永远不会被设为false。我怎样才能改变它，使它变为false?

按要求添加AppStore.js:

"use strict";
var AppDispatcher = require('../AppDispatcher');
var assetConstants = require('../constants/AssetConstants');
var EventEmitter = require('events').EventEmitter;
var CHANGE_EVENT = 'assetChange';
// Application State
var _assetDetails = {
    assetList: [],
    requestStatus: undefined,
    totalCount: 0
};
var _queryProgress;
var AppStore = $.extend({}, EventEmitter.prototype, {
    emitChange: function(){
        this.emit(CHANGE_EVENT);
    },
    addChangeListener: function(callback){
        this.on(CHANGE_EVENT, callback);
    },
    removeChangeListener: function(callback){
        this.removeListener(CHANGE_EVENT, callback);
    },
    getTotalCount: function(){
        if(_assetDetails.meta){
            return _assetDetails.meta.total_count;
        }
        return 0;
    },
    getAssetDetails: function(){
        return _assetDetails;
    },
    getRequestStatus: function(){
        return _assetDetails.requestStatus;
    },
    getQueryProgress: function(){
        return _queryProgress;
    },
    dispatcherIndex: AppDispatcher.register(function(payload){
        var action = payload.action.actionType;
        if(payload.source === "ASSET_ACTION"){
            switch(action){ // eslint-disable-line default-case
                case assetConstants.QUERY_ASSETS:
                    _assetDetails = payload.action.assetDetails;
                    break;
                case assetConstants.QUERY_PROGRESS:
                    _queryProgress = payload.action.progress;
                    break;
            }
            AppStore.emitChange();
            _assetDetails.requestStatus = undefined;
        }
        return true;
    })
});
module.exports = AppStore;

重新编辑添加AppActions.js:

"use strict";
var assetConstants = require('../constants/AssetConstants');
var AppDispatcher = require('../AppDispatcher');
var config = require('../../config');
var ITEM_V2_MAP = require('./apiRemapping').ITEM_V2_MAP;
var getRemappedAssets = require('./apiRemapping').getRemappedAssets;
var AssetActions = {
    queryAssets: function(filters){
        var assetDetails;
        $.ajax({
            method: "GET",
            url: config.endpoints.itemAPIV2,
            contentType: "application/json",
            dataType: "json",
            data: filters,
            beforeSend: function(){
                AppDispatcher.handleAssetAction({
                    actionType: assetConstants.QUERY_PROGRESS,
                    progress: "querying"
                });
            },
            success: function(data) {
                var remappedAssets = getRemappedAssets(
                    data.objects, ITEM_V2_MAP
                );
                assetDetails = {
                    assetList: remappedAssets,
                    currentFilters: filters,
                    meta: data.meta
                };
            },
            error: function() {
                assetDetails = {
                    assetList: [],
                    totalCount: 0
                };
            },
            complete: function(data) {
                assetDetails.requestStatus = data.status;
                AppDispatcher.handleAssetAction({
                    actionType: assetConstants.QUERY_ASSETS,
                    assetDetails: assetDetails
                });
                AppDispatcher.handleAssetAction({
                    actionType: assetConstants.QUERY_PROGRESS,
                    progress: "finished querying"
                });
            }
        });
    }
};
module.exports = AssetActions;