jonho
jonho

Reputation: 1738

react/flux- child component user events - should everything be routed via the dispatcher

I am just working on a simple prototype using flux and react. Previously when i have used React I have sent events from child components up to their parent components (who have registered prop callbacks on the child) and then changed state in the parent.

Following the Flux architecture should ALL events be raised via the Dispatcher? For example even a simple user event such as the selection of a checkbox should be raised via this chain:

  1. create an action in the component event handler
  2. send to the dispatcher
  3. dispatcher sends to a store
  4. store emits a change event to the controller view
  5. the controller view calls back to the store to pick up the change

thanks

Upvotes: 5

Views: 416

Answers (2)

lucasfeliciano
lucasfeliciano

Reputation: 86

A action should be dispatched on two scenarios:

  • User's input
  • When you have to change a parent level data from a child component.

In your case for you dispatch a action for each user's interaction depends on your application and you should ask your self three questions:

  • Do you need make a request to let your backend know about the checkbox state?
  • Do you do any kind of API call?
  • Do other non-child components need to know about it?

If at one least of the answers for the questions above is 'yes' then you should dispatch a action.

Upvotes: 3

François Richard
François Richard

Reputation: 7045

I think it's all about dependencies, if your event is or may create dependencies (ie have an impact on your information flux or determine future informations received) then you should use an action and a store.

An example: you have a form with several checkbox I think it's not necessary to use actions and store, the user can change his mind, check/uncheck things, it matters when the form is sent, then you trigger an action.

On the contrary if this checkbox is something like 'notify me if anything new' and trigger the creation of a listener then you should use an action and stores.

Upvotes: 2

Related Questions