回流-同一视图中的多个操作

Question

我刚开始使用reactjs & reflux，我不知道如何实现下一种情况：

我有一个带有一些选项卡的视图，每个选项卡都将有来自API的不同数据。到目前为止，我所做的代码如下：

我的组件：

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;

操作：

import Reflux from 'reflux';

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

export default SocialActions;

商店：

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;

所以第一次yo enter是在第一个选项卡中工作，因为我已经在init中实例化了它，但我不知道当用户在每个选项卡中单击并填充内容时如何设置每个选项卡中的state。

你知道怎么做吗？

谢谢！！

Answer 1

您可以在这里做一些事情来更好地利用回流模式：

• SocialStore应该负责存储当前选择的选项卡的state，并且Social组件应该相对于该state.
• You进行呈现每次选择选项卡或更改选择时都应该有一个事件侦听器，即onSelectionChange。onSelectionChange应该启动并调用相应的Action，SocialStore将侦听并更改哪个选项卡的state当前是Social组件，然后侦听SocialStore更改并更新其组件状态，该render()再次被触发，并且您的视图通过查看每个社交<

>D20>和Store有多相似以及它们是如何实现的来正确地反映所选的内容。我强烈建议您将所有Actions分解为一个单独的选项卡，但需要一个参数来指示选择了哪个选项卡。同样的道理也适用于Store中get{Social}函数的处理。(这一步是可选的，但会产生更干净、更易维护的代码)