0

I am building a dashboard for my site in ReactJs using the flux architecture.

Now let's say I have a UsersComponent which displays a list of all users registered in the website, and this component has a UsersStore where the data is fetched and stored.

Inside UsersComponent I render a sub component named UsersStatsComponent which is a small widget that displays statistics from the last 24 hours (number of new registrations, blocked users and more...) these statistics comes from a different API endpoint.

Where should I manage the data for this sub component?

I consider my options are:

  1. Create another store named UsersStatsStore which fetches the data from the API and emits the change event to UsersStatsComponent.
  2. Use the same store of UsersStore and create another action inside this store and emit a different event when the data has fetched from the API.

What is the best practice for this?

ShaiShai
  • 134
  • 7

1 Answers1

0

Since the data is related to the User, I would recommend UserStore. But you need to make sure that there is not too much nesting in the store.

Shishir Anshuman
  • 1,115
  • 7
  • 23
  • So the `UsersStore` will end up having 2 addListeners? one for the list of users and one for the stats? Is that sound a good practice? I haven't seen this approach in all the example & tutorials about flux stores. – ShaiShai Jan 28 '17 at 17:50
  • Have a look at this [answer](http://stackoverflow.com/a/26602976/5284640), you will get a more clarity when to use multiple stores. – Shishir Anshuman Jan 29 '17 at 18:43