CODEWITHSUNDEEP
javascriptreactjsflux
mctep
mctep

Reputation: 100

Flux personal store for component

I have UI like this:

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

Where UserSelect is component for selecting user with autocomplete. There can be many of them. One type of component can listen singleton Store in Flux. But in my case the change of value in one UserSelect component affects the states of the others.

How should I build my app to solve this problem?

Create one store per component in componentDidMount?

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

Or making something like query selectors in Store?

// 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 });
}

Or ...?

Upvotes: 0

Views: 71

Answers (1)

marizikmund
marizikmund

Reputation: 408

You can use the second approach and do something like query selectors and be fine. Just don't forget about the correct Flux flow.

If you want to have really great performance and easier development in long-run, use immutable data structures. Then, you will not have to worry about affecting other components (regarding to the performance). Here is a simple introduction article: http://blog.risingstack.com/the-react-js-way-flux-architecture-with-immutable-js/

Upvotes: 1

Related Questions