Reflux - Multiples actions in the same view

Question

I'm pretty new using reactjs & reflux and I have no idea how to implement the next situation:

I have a view with some tabs, each tab is going to have different data coming from an API. So far what I have done is the code below:

My Component:

import React from 'react';
import Reflux from 'reflux';
import SocialStore from '../stores/socialStore';
import Card from './shared/card.js'


var Social = React.createClass({
  mixins: [Reflux.connect(SocialStore, 'socialstore')],

  render: function() {
    if(this.state.socialstore){
      var tempSocialStore = this.state.socialstore
    }else{
      var tempSocialStore = [];
    }

    return <div className="android-be-together-section">
        <div className="mdl-layout mdl-js-layout mdl-layout--fixed-header">
          <header className="mdl-layout__header">
            <div className="mdl-layout__header-row">
              <span className="mdl-layout-title">Portfolio</span>
            </div>
            <div className="mdl-layout__tab-bar mdl-js-ripple-effect">
              <a href="#scroll-tab-1" className="mdl-layout__tab is-active">Stackoverflow</a>
              <a href="#scroll-tab-2" className="mdl-layout__tab">GitHub</a>
              <a href="#scroll-tab-3" className="mdl-layout__tab">Twitter</a>
              <a href="#scroll-tab-4" className="mdl-layout__tab">Instagram</a>
            </div>
          </header>
          <main className="mdl-layout__content">
            <section className="mdl-layout__tab-panel is-active" id="scroll-tab-1">
              <div className="page-content">
                <div className="content">
                  {
                    tempSocialStore.map(function (item){
                      return  <Card title={item.title_description} description={item.summary_description} btnTitle="View" link={item.id_description} />
                    })
                  }
                </div>
              </div>
            </section>
            <section className="mdl-layout__tab-panel" id="scroll-tab-2">
              <div className="page-content">content 2</div>
            </section>
            <section className="mdl-layout__tab-panel" id="scroll-tab-3">
              <div className="page-content">content 3</div>
            </section>
            <section className="mdl-layout__tab-panel" id="scroll-tab-4">
              <div className="page-content">content 4</div>
            </section>
          </main>
        </div>
    </div>
  }
});

export default Social;

Actions:

import Reflux from 'reflux';

let SocialActions = Reflux.createActions([
  'getStackoverflowFeed',
  'getTwitter',
  'getGithub',
  'getInstagram'
]);

export default SocialActions;

Store:

import Reflux from 'reflux';
import $ from 'jquery';
import SocialActions from '../actions/SocialActions';

var SocialStore = Reflux.createStore({
  listenables: [SocialActions],
  stackoverflowList: [],
  twitterList: [],
  instagramList: [],
  githubList: [],
  sourceUrlStackoverflow: 'url-1',
  sourceUrlTwitter: 'url-2',
  sourceUrlInstagram: 'url-3',
  sourceUrlGithub: 'url-4',

  init: function(){
      this.getStackoverflowFeed(); //First Tab
  },

  getTwitter: function(){
    $.ajax({
          url: this.sourceUrlTwitter,
          type: 'GET',
          cache: false,
          context: this,
          success: function(data) {
            this.twitterList = data.results;
            this.trigger(this.twitterList);
          },
          error: function(){
            console.log('There was an error while your request');
          }
      });
  },

  getInstagram: function(){
    $.ajax({
          url: this.sourceUrlInstagram,
          type: 'GET',
          cache: false,
          context: this,
          success: function(data) {
            this.instagramList = data.results;
            this.trigger(this.instagramList);
          },
          error: function(){
            console.log('There was an error while your request');
          }
      });
  },

  getGithub: function(){
    $.ajax({
          url: this.sourceUrlGithub,
          type: 'GET',
          cache: false,
          context: this,
          success: function(data) {
            this.githubList = data.results;
            this.trigger(this.githubList);
          },
          error: function(){
            console.log('There was an error while your request');
          }
      });
  },

  getStackoverflowFeed: function(){
    $.ajax({
          url: this.sourceUrlStackoverflow,
          type: 'GET',
          cache: false,
          context: this,
          success: function(data) {
            this.stackoverflowList = data.results; //TODO: Remove comments from the list.
            this.trigger(this.stackoverflowList);
          },
          error: function(){
            console.log('There was an error while your request');
          }
      });
  }
});

export default SocialStore;

So the first time yo enter is working the first tab because I have instantiated it in the init, but I don´t know how to set the state in each tab when the user click in them and fill the content.

any idea how to do it?

Thanks!!

Are you having further issues moving on? If your problem is solved then you should mark the answer that helped resolving the problem as **accepted**. This helps other people who have the same question. Happy Coding :) — Ling Zhong, Nov 08 '15 at 23:18

score 0 · Answer 1 · answered Oct 18 '15 at 15:37

Few things you can do here to better leverage the reflux pattern:

The SocialStore should be responsible for storing the state of which tab is currently selected, and the Social component should be rendering with respect to that state.
You should have an event listener for each time a tab is selected or selection changed, i.e. onSelectionChange. onSelectionChange should fire off and call the corresponding Action, which the SocialStore will listen to and changes the state of which tab is currently selected.
Your Social component then listens to SocialStore change and updates its component state, which render() is triggered again and your view properly reflects what is selected
By looking at how similar each social Action and Store are and how they're implemented. I highly suggest you factor out all your Actions into a single one but takes in a parameter indicating which tab is selected. The same goes to factoring out the handling of get{Social} function in the Store. (This step is optional but results in cleaner and more maintainable code)

Reflux - Multiples actions in the same view

1 Answers1