CODEWITHSUNDEEP
javascriptreactjsflux
manutenfruits
manutenfruits

Reputation: 1577

Flux: multiple containers with same store, different state

I have two Flux Containers (CustomerList) that are basically filterable, paginated lists of Customer entities. They are rendered in the same page, but the filters are independent. Whenever I change the filters or advance a page, I need to make a request to the server, through Action Creators, that in turn fire the Dispatcher and update the CustomerStore, which fires an event and updates the containers.

If Stores are supposed to be singletons in Flux (and if calculateState is a static method), how can I keep two instances of the same component without one of them overwriting the contents of the other?

Upvotes: 1

Views: 258

Answers (1)

wintvelt
wintvelt

Reputation: 14101

From your description, I understand:

  • You have one flux CustomerStore, which holds all customers
  • And two <CustomerList> component instances, that each fetch data from the CustomerStore
  • But they each need to fetch different data from the CustomerStore

In such a setup, you could:

  • for each instance of <CustomerList> - save all filter settings in the state of your component <CustomerList>.
  • after your component fetches the data from store (through some getStateFromStores() call), apply the filters from state, to only render the filtered results

Then your (singleton) CustomerStore will contain the union of server responses from Ajax calls from both instances, each instance gets all customer records, but each instance only displays their own filters applied.
In an example:

  • CustomerStore is empty
  • <CustomerList> instance 1 and instance 2 both show page 1
  • <CustomerList> instance 1 fires 'get page 2' action
  • results from server (page 2 customers) are added to CustomerStore
  • CustomerStore mits change
  • <CustomerList> 1 gets entire store contents, and shows only page 2
  • <CustomerList> 2 gets entire store contents, and shows only page 1
  • <CustomerList> 2 sets filter to 'new customers only' and fires action
  • results from server (new customers beyond page 2) are added to CustomerStore
  • <CustomerList> 1 gets entire store contents, and shows only page 2 (no change from previous render)
  • <CustomerList> 2 gets entire store contents, and shows only new customers (because of filter includes new customers beyond page 2)

Upvotes: 1

Related Questions