reactjsrefluxjs

Reflux.js + React.js trigger result is wrong


I'm trying to create a dynamic NavBar with react and reflux fetch.

This is my actions file:

  var Reflux = require('reflux');

  var SubMenuActions = Reflux.createActions([
       'getSubItems'
  ]);

  module.exports = SubMenuActions;

My store file:

 var Reflux = require('reflux');
 var SubMenuActions = require('../actions/SubMenuActions.jsx');
 var HTTP = require('../services/httpService.js');

 var SubMenuStore = Reflux.createStore({
 listenables: [SubMenuActions],
   getSubItems: function(urls){
   var promises = [];
   var thys = this;
   for(var i in urls){
     promises.push(HTTP.getSubItems(urls[i]));
   }
  Promise.all(promises).then(function(data){
    thys.trigger(data);
  });
  }
  });

  module.exports = SubMenuStore;

My http method:

  getSubItems: function(url){
    return fetch(url)
   .then(function(response){
     return  response.json();
   });
  }

And the last one, my navitem file where trigger is catched:

var React = require('react');
var NavSubItem = require('./NavSubItem.jsx');
var SubMenuStore = require('../reflux/stores/SubMenuStore.jsx');
var Reflux = require('reflux');

var NavItem = React.createClass({
  mixins: [Reflux.listenTo(SubMenuStore, 'onChange')],
  getInitialState: function(){
    return{
      urls: this.props.urls,
      subItems: []
    };
  },
  componentWillMount: function(){
    SubMenuStore.getSubItems(this.state.urls);
  },
  onChange: function(items){
    console.log(items);
  },
  createNavSubItem: function(item, index){
    return <NavSubItem key={item + index} name={item.name}/>;
  },
  render: function(){
    return(
        <li className="menuLists dropdown">
           <a href="#"
              className="dropdown-toggle"
              data-toggle="dropdown"
              role="button"
              aria-haspopup="true"
              aria-expanded="false">{this.props.name}
              <span className="caret"></span>
            </a>
           <ul className="dropdown-menu">
            {this.state.subItems.map(this.createNavSubItem)}
          </ul>
        </li>
    );
  }
});

module.exports = NavItem;

The problem is that when I check the result of "console.log(items)" that is at onChange method I receive each result twice, as if trigger method were triggered twice.

That's why I cannot have my navbar completely correct.

Does someone know about this problem?? Please help me!


Solution

  • In componentWillMount you should be using an action, not calling the store directly.