Flux личного магазина для компонента

Question

У меня есть пользовательский интерфейс, как это:

First User: <UserSelect value={this.state.user1} /> 
Second User: <UserSelect value={this.state.user2} /> 
... 
Other User: <UserSelect value={this.state.user3} /> 

UserSelect Где это компонент для выбора пользователя с автозаполнением. Их может быть много. Один тип компонента может слушать singleton Store in Flux. Но в моем случае изменение стоимости в одном компоненте UserSelect влияет на состояния других.

Как мне создать приложение для решения этой проблемы?

Создать один магазин на один компонент в componentDidMount?

// not flux way 
componenDidMount: function() { 
    this.usersStore = UsersStore.createStore(); 
    this.usersStore.on('change', ...); 
} 

Или сделать что-то вроде селекторов запросов в магазине?

// flux way, but affects all mounted components on page 
componenDidMount: function() { 
    UsersStore.on('change', this.update); 
}, 

update: function() { 
    this.setState({ 
    items: UserStore.get({ loginLike: this.state.inputValue }) 
    }); 
}, 

handleInputChange: function(e) { 
    this.setState({ inputValue: e.target.value }); 
    loadUsersAction({ loginLike: e.target.value }); 
} 

Или ...?

Answer 1

Вы можете использовать второй подход и сделать что-то вроде селекторов запросов и быть в порядке. Просто не забывайте о правильном потоке потока.

Если вы хотите иметь отличную производительность и более легкую разработку в долгосрочной перспективе, используйте неизменные структуры данных. Тогда вам не придется беспокоиться о влиянии на другие компоненты (относительно производительности). Вот простая статья введения: http://blog.risingstack.com/the-react-js-way-flux-architecture-with-immutable-js/