Reflux - 同一视图中的多个操作

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;

所以你第一次输入是在第一个选项卡上工作，因为我已经在init 中实例化了它，但是当用户点击它们并填写内容。

知道怎么做吗？

谢谢！！

Answer 1

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

• SocialStore 应该负责存储当前选择哪个选项卡的state，并且Social 组件应该相对于该state 进行渲染。
• 每次选择选项卡或更改选择时，您都应该有一个事件侦听器，即onSelectionChange。 onSelectionChange 应该触发并调用相应的Action，SocialStore 将监听并更改当前选择的选项卡的state。
• 您的Social 组件随后会监听SocialStore 的更改并更新其组件状态，render() 会再次触发，您的视图会正确反映所选内容
• 通过查看每个社交 Action 和 Store 的相似程度以及它们的实施方式。我强烈建议您将所有Actions 分解为一个，但需要一个参数来指示选择了哪个选项卡。这同样适用于在Store 中对get{Social} 函数的处理。 （此步骤是可选的，但会产生更简洁、更易于维护的代码）