The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

React Flux: Stores

React Flux: Stores

6:03
Stores are where the real work in our application is done. Dispatchers broadcast Actions to all Stores, and the Stores registered to listen for those Actions will perform any logic needed to update our Views. In this lesson we will establish our first Store and register the Actions we wish to respond to.
Watch this lesson now
Avatar
egghead.io

Stores are where the real work in our application is done. Dispatchers broadcast Actions to all Stores, and the Stores registered to listen for those Actions will perform any logic needed to update our Views. In this lesson we will establish our first Store and register the Actions we wish to respond to.

Avatar
Jeff

I have 2 questions here:

  1. It appears that you are using the the same items in the catalog to represent items in the cart. Then you're just adding new properties to those items (inCart and qty). It seems as if this would ordinarily have used a CartItem that perhaps referenced the CatalogItem, but maintained the qty by itself. Am I missing something that makes my concern invalid?

  2. You're again managing the cart by array index. If this were an async app, would it be possible to have, say 2 items in your cart. Then you click remove on first item, and increase on the second. If done quickly enough, would the increase event be sent with index 1, instead of it's new index (0)? I guess I'm at a loss as to why the cart is an array instead of a hash with item ids as keys.

In reply to egghead.io
Avatar
Joseph
  1. It is not that your concern invalid it just involves a different approach. In our example our dataset is so small and so closely resembles exactly what we need to build up a list of cart items that it works really well and keeps the purpose of the tutorial intact.

  2. I'd have to write a test that runs your particular scenario to be certain, but our dispatcher should prevent the race condition you are describing. Array vs a reference to the catalog item id? The end result is the same and the lesson content is focused on Flux Architecture rather than unrelated complexities.

In reply to Jeff
Avatar
Rafael

Hello! I'm trying to understand Flux and how everything works and these videos are being super helpful!

Now, on the Store file, it's still a bit strange/confusing to me that we emit change by running AppStore.emitChange() right after our switch statement instead of emitting the change after each function (ie.: after addItem or removeItem) as a callback or something).

Just for testing, I set a timeout on the 'addItem' function to delay its response/logic and the change is emitted 'before' the 'addItem' task has been completed, which breaks the App cause the Cart listens to the 'eventChange' and updates its own state while the latest data isn't there yet.

Should I be concerned about this happening with more complex apps or am I missing something here?

Tks!

Avatar
Matthew

What do you do when you need to use a store in more than one component? Would you require() the store in a parent/controller view then pass it through the props to children?

I've started a Stackoverflow question: http://stackoverflow.com/questions/36380193/how-to-use-store-in-multiple-componenets/36380301#36380301

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?