В React's Flux, как использовать магазин, когда два компонента нуждаются в разных данных из магазина одновременно?

Question

У меня есть магазин (MovieStore), который я бы хотел использовать в качестве центрального магазина для фильмов в своем приложении React. У меня есть страница поиска, в которой перечислены фильмы на основе строки поиска (и, конечно, использует MovieStore).

Кроме того, у меня есть компонент typeahead, который создает предложения на основе строки, введенной пользователем в поле поиска. Я хочу использовать тот же MovieStore для typeahead.

Проблема заключается в том, что в этом случае MovieStore должен представлять два состояние одновременно (в списке результатов из предыдущего поиска, а также предложения машинописных на основе текущей строки поиска)

Я кончался испуская два разных вида событий из магазина, typeahead, слушая одно событие, список результатов прослушивает другой, но он чувствует себя неловко. (потому что в конце дня один из двух компонентов выходит из строя, он просто не воспринимает конкретный вид события намеренно).

Какое лучшее решение вы бы предложили для этого?

Вот упрощенная версия моего кода (я уверен, что это плохой дизайн, потому что магазин не является чистым больше, она была скорректирована с учетом этих специфических компонентов)

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, как машинописный и список будет обновляться. Не беспокойтесь о «стоимости» обновления обоих компонентов, когда, возможно, нужно обновить только одно: это минимально.

Надеюсь, что поможет