Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 371
jonho Avatar asked Mar 15 '15 11:03

jonho


People also ask

What is the use of flux dispatcher in react?

The Flux Dispatcher is used to receive actins and dispatches these actions and data to registered callbacks. What is the use of pub/sub? The pub/sub handler is not essential in the Flux in React JS.

Why pub/sub handler is not essential in flux in react JS?

The pub/sub handler is not essential in the Flux in React JS. The Dispatcher itself broadcasts the payload to all registered callbacks which have functionality allows to invoke the callbacks in particular order and also waiting for updates before proceeding. There is only one dispatcher that acts as the central hub in your application.

How to get the data from parent to child in react?

import React, { Component } from 'react' export default class Child extends Component { render () { return ( <div> {this.props.parentToChild} </div> ) } } Either way, you will get the same results: When we click the Click Parent button, we will see the data as output on the screen.

What are dispatcher and stores in react?

Dispatcher: It is used to receive action and to broadcast payloads to registered callbacks. Stores: These are containers for applications that have callbacks registered to the dispatcher. Controller View: The react components which consider the state from stores and pass it down through props to child components. Let’s see this process graphically.


2 Answers

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.

like image 79
lucasfeliciano Avatar answered Sep 18 '22 19:09

lucasfeliciano


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.

like image 45
François Richard Avatar answered Sep 22 '22 19:09

François Richard