Question

我有一个商店（MovieStore），我想在我的React App中用作电影的中央商店。我有一个搜索页面，它根据搜索字符串列出电影（当然还使用MovieStore）。

此外，我还有一个预先输入组件，它根据用户在搜索框中输入的字符串提出建议。我也希望使用相同的MovieStore进行输入。

问题是，在这种情况下，MovieStore应该同时代表两个状态（上一次搜索的结果列表，以及基于当前搜索字符串的预先输出建议）

我最终从商店发出了两种不同的事件，一种是先前听一个事件，一种是听另一种事件的结果列表，但感觉很尴尬。（因为在一天结束时，两个组件中的一个不同步，它只是不故意听取特定类型的事件。）

你会为此建议更好的解决方案吗？

这是我的代码的简化版本（我确定它是一个糟糕的设计，因为商店不再是纯粹的，它被调整为这些特定的组件）

var MovieStore = _.extend({}, EventEmitter.prototype, {

    getAll: function() {
        return movies;
    },

    //this will notify when the "search result" changed
    emitListChange: function() {
        this.emit('listChange');
    },

    //this will notify when the "typeahead string" changed
    emitSearchChange: function() {
        this.emit('searchChange');
    },

    // ... add/remove listeners
});

var Typeahead = React.createClass({
    componentDidMount: function() {
        MovieStore.addSearchChangeListener(this.onMoviesChanged);
    },

    onMoviesChanged() {
        this.setState({
            movies: Movies.getAll(),
        });
    },

    //...
});

var List = React.createClass({
    componentDidMount: function() {
        MovieStore.addListChangeListener(this.onMoviesChanged);
    },

    onMoviesChanged() {
        this.setState({
            movies: Movies.getAll(),
        });
    },

    //...
});

Answer 1

为什么不让每个组件只是从商店中侦听CHANGE事件。然后，每个组件都可以在商店中查询所需的信息。

示例...

var Typeahead = React.createClass({
  // deliberately omitting some stuff

  componentDidMount() {
    MovieStore.addChangeListener(this.onMovieStoreChange);
  },

  onMovieStoreChange() {
    this.setState({movies: MovieStore.getAll()});
  },
});

// Then in List

var List = React.createClass({
  componentDidMount() {
    MovieStore.addChangeListener(this.onMovieStoreChanged)
  },
});

所以，现在，每当MovieStore更新时，Typeahead和List都会更新。不要担心成本＆＃34;当可能只有一个需要更新时更新两个组件：它是微不足道的。

希望有所帮助

在React的Flux中，当两个组件同时需要来自商店的不同数据时，如何使用商店？

1 个答案: