ReactJS Two components communicating

Question

I just got started with ReactJS and am a little stuck on a problem that I have     My application is essentially a list with filters and a button to change the layout   At the moment I m using three components   lt list   gt    lt  Filters   gt  and  lt TopBar   gt   now obviously when I change settings in  lt  Filters   gt  I want to trigger some method in  lt list   gt  to update my view     How can I make those 3 components interact with each other  or do I need some sort of global data model where I can just make changes to

User · Answer

OK  there are few ways to do it  but I exclusively want focus on using store using Redux which makes your life much easier for these situations rather than give you a quick solution only for this case  using pure React will end up mess up in real big application and communicating between Components becomes harder and harder as the application grows     So what Redux does for you   Redux is like local storage in your application which can be used whenever you need data to be used in different places in your application     Basically  Redux idea comes from flux originally  but with some fundamental changes including the concept of having one source of truth by creating only one store     Look at the graph below to see some differences between Flux and Redux       Consider applying Redux in your application from the start if your application needs communication between Components     Also reading these words from Redux Documentation could be helpful to start with       As the requirements for JavaScript single-page applications have   become increasingly complicated  our code must manage more state than   ever before  This state can include server responses and cached data    as well as locally created data that has not yet been persisted to the   server  UI state is also increasing in complexity  as we need to   manage active routes  selected tabs  spinners  pagination controls    and so on       Managing this ever-changing state is hard  If a model can update   another model  then a view can update a model  which updates another   model  and this  in turn  might cause another view to update  At some   point  you no longer understand what happens in your app as you have   lost control over the when  why  and how of its state  When a system   is opaque and non-deterministic  it s hard to reproduce bugs or add   new features       As if this wasn t bad enough  consider the new requirements becoming   common in front-end product development  As developers  we are   expected to handle optimistic updates  server-side rendering  fetching   data before performing route transitions  and so on  We find ourselves   trying to manage a complexity that we have never had to deal with   before  and we inevitably ask the question  is it time to give up  The   answer is no       This complexity is difficult to handle as we re mixing two concepts   that are very hard for the human mind to reason about  mutation and   asynchronicity  I call them Mentos and Coke  Both can be great in   separation  but together they create a mess  Libraries like React   attempt to solve this problem in the view layer by removing both   asynchrony and direct DOM manipulation  However  managing the state of   your data is left up to you  This is where Redux enters       Following in the steps of Flux  CQRS  and Event Sourcing  Redux   attempts to make state mutations predictable by imposing certain   restrictions on how and when updates can happen  These restrictions   are reflected in the three principles of Redux

User · Answer

If you want to explore options of communicating between components and feel like it is getting harder and harder  then you might consider adopting a good design pattern  Flux   It is simply a collection of rules that defines how you store and mutate application wide state  and use that state to render components   There are many Flux implementations  and Facebook s official implementation is one of them  Although it is considered the one that contains most boilerplate code  but it is easier to understand since most of the things are explicit   Some of Other alternatives are flummox fluxxor fluxible and redux

User · Answer

Extending answer of  MichaelLaCroix when a scenario is that the components can t communicate between any sort of parent-child relationship  the documentation recommends setting up a global event system   In the case of  lt Filters   gt  and  lt TopBar   gt  don t have any of the above relationship  a simple global emitter could be used like this   componentDidMount - Subscribe to event  componentWillUnmount - Unsubscribe from event  React js and EventSystem code  EventSystem js  class EventSystem       constructor             this queue               this maxNamespaceSize   50             publish     namespace         arguments                if arguments length  lt  1                throw  Invalid namespace to publish                      var namespace   arguments 0           var queue   this queue namespace            if  typeof queue      undefined     queue length  lt  1                console log  did not find queue for  s   namespace               return false                     var valueArgs   Array prototype slice call arguments            valueArgs shift       remove namespace value from value args          queue forEach function callback                callback apply null  valueArgs                        return true             subscribe     namespace         callback                const namespace   arguments 0           if  namespace  throw  Invalid namespace           const callback   arguments arguments length - 1           if typeof callback      function   throw  Invalid callback method            if  typeof this queue namespace       undefined                 this queue namespace                           const queue   this queue namespace           if queue length     this maxNamespaceSize                console warn  Shifting first element in queue    s  since it reached max namespace queue count    d   namespace  this maxNamespaceSize               queue shift                          Check if this callback already exists for this namespace         for var i   0  i  lt  queue length  i                  if queue i      callback                    throw   The exact same callback exists on this namespace      namespace                                    this queue namespace  push callback            return  namespace  callback              unsubscribe     array or topic  method                let namespace          let callback          if arguments length     1                let arg   arguments 0               if  arg     Array isArray arg   throw  Unsubscribe argument must be an array               namespace   arg 0               callback   arg 1                     else if arguments length     2                namespace   arguments 0               callback   arguments 1                      if  namespace    typeof callback      function   throw  Namespace must exist or callback must be a function           const queue   this queue namespace           if queue                for var i   0  i  lt  queue length  i                      if queue i      callback                        queue splice i  1      only unique callbacks can be pushed to same namespace queue                     return                                                       setNamespaceSize size            if  this isNumber size   throw  Queue size must be a number           this maxNamespaceSize   size          return true             isNumber n            return  isNaN parseFloat n    amp  amp  isFinite n              NotificationComponent js  class NotificationComponent extends React Component        getInitialState             return                  optional  see alternative below             subscriber  null                       errorHandler             const topic   arguments 0           const label   arguments 1           console log  Topic  s label  s   topic  label              componentDidMount             var subscriber   EventSystem subscribe  error http   this errorHandler           this state subscriber   subscriber             componentWillUnmount             EventSystem unsubscribe  error http   this errorHandler               alternatively            EventSystem unsubscribe this state subscriber              render

User · Answer

I saw that the question is already answered  but if you d like to learn more details  there are a total of 3 cases of communication between components    Case 1  Parent to Child communication Case 2  Child to Parent communication Case 3  Not-related components  any component to any component  communication

User · Answer

The following code helps me to setup communication between two siblings  The setup is done in their parent during render   and componentDidMount   calls  It is based on https   reactjs org docs refs-and-the-dom html Hope it helps   class App extends React Component lt IAppProps  IAppState gt        private  navigationPanel  NavigationPanel      private  mapPanel  MapPanel       constructor             super            this state                      componentDidMount    is called by ReactJS after  render        componentDidMount                Pass  mapPanel to  navigationPanel            It will allow  navigationPanel to call  mapPanel directly         this  navigationPanel setMapPanel this  mapPanel              render             return                lt div id  appDiv  style  divStyle  gt                      ref   helps to get reference to a child during rendering                  lt NavigationPanel ref   child    gt    this  navigationPanel   child       gt                   lt MapPanel ref   child    gt    this  mapPanel   child       gt               lt  div gt

User · Answer

This is the way I handled this  Let s say you have a  lt select gt  for Month and a  lt select gt  for Day  The number of days depends on the selected month   Both lists are owned by a third object  the left panel  Both  lt select gt  are also children of the leftPanel  lt div gt  It s a game with the callbacks and the handlers in the LeftPanel component   To test it  just copy the code into two separated files and run the index html  Then select a month and see how the number of days changes   dates js           jsx React DOM          var monthsLength    0 31  28  31  30  31  30  31  31  30  31  30  31       var MONTHS ARR     Jan   Feb   Mar   Apr   May   Jun   Jul   Aug   Sep   Oct   Nov   Dec         var DayNumber   React createClass           render  function                 return                    lt option value  this props dayNum  gt  this props dayNum  lt  option gt                                        var DaysList   React createClass           getInitialState  function                 return  numOfDays  30                      handleMonthUpdate  function newMonthix                this state numOfDays   monthsLength newMonthix               console log  Setting days to     monthsLength newMonthix      month       newMonthix                this forceUpdate                       handleDaySelection  function evt                this props dateHandler evt target value                      componentDidMount  function                 this props readyCallback this handleMonthUpdate                     render  function                 var dayNodes                   for  i   1  i  lt   this state numOfDays  i                      dayNodes   dayNodes concat   lt DayNumber dayNum  i    gt                               return                    lt select id  this props id  onChange    this handleDaySelection  gt                       lt option value    disabled defaultValue gt Day lt  option gt                           dayNodes                   lt  select gt                                            var Month   React createClass           render  function                 return                    lt option value  this props monthIx  gt  this props month  lt  option gt                                        var MonthsList   React createClass           handleUpdate  function evt                console log  Local handler     this props id     VAL      evt target value               this props dateHandler evt target value                return false                     render  function                 var monthIx   0               var monthNodes   this props data map function  month                    monthIx                    return                        lt Month month  month  monthIx  monthIx    gt                                                      return                    lt select id    this props id  onChange    this handleUpdate  gt                       lt option value    disabled defaultValue gt Month lt  option gt                           monthNodes                   lt  select gt                                            var LeftPanel   React createClass           dayRefresh  function newMonth                   Nothing - will be replaced                    daysReady  function refreshCallback                console log  Regisering days list            this dayRefresh   refreshCallback                     handleMonthChange  function monthIx                console log  New month                this dayRefresh monthIx                      handleDayChange  function dayIx                console log  New DAY      dayIx                      render  function                 return                   lt div id  orderDetails  gt                       lt DaysList id  dayPicker  dateHandler  this handleDayChange  readyCallback    this daysReady    gt                       lt MonthsList data  MONTHS ARR  id  monthPicker  dateHandler  this handleMonthChange     gt                   lt  div gt                                          React renderComponent           lt LeftPanel   gt           document getElementById  leftPanel            And the HTML for running the left panel component index html   lt  DOCTYPE html gt   lt html gt   lt head gt       lt title gt Dates lt  title gt        lt script src    cdnjs cloudflare com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt       lt script src    cdnjs cloudflare com ajax libs underscore js 1 6 0 underscore-min js  gt  lt  script gt       lt script src    fb me react-0 11 1 js  gt  lt  script gt       lt script src    fb me JSXTransformer-0 11 1 js  gt  lt  script gt   lt  head gt        lt style gt            dayPicker               position  relative              top  97px              left  20px              width  60px              height  17px                      monthPicker               position  relative              top  97px              left  22px              width  95px              height  17px                     select               font-size  11px                  lt  style gt         lt body gt           lt div id  leftPanel  gt           lt  div gt            lt script type  text jsx  src  dates js  gt  lt  script gt        lt  body gt   lt  html gt

User · Answer

The best approach would depend on how you plan to arrange those components  A few example scenarios that come to mind right now    lt Filters   gt  is a child component of  lt List   gt  Both  lt Filters   gt  and  lt List   gt  are children of a parent component  lt Filters   gt  and  lt List   gt  live in separate root components entirely   There may be other scenarios that I m not thinking of  If yours doesn t fit within these  then let me know  Here are some very rough examples of how I ve been handling the first two scenarios  Scenario  1 You could pass a handler from  lt List   gt  to  lt Filters   gt   which could then be called on the onChange event to filter the list with the current value  JSFiddle for  1        jsx React DOM     var Filters   React createClass     handleFilterChange  function         var value   this refs filterInput getDOMNode   value      this props updateFilter value          render  function         return  lt input type  quot text quot  ref  quot filterInput quot  onChange  this handleFilterChange  placeholder  quot Filter quot    gt            var List   React createClass     getInitialState  function         return         listItems    Chicago    New York    Tokyo    London    San Francisco    Amsterdam    Hong Kong          nameFilter                   handleFilterUpdate  function filterValue        this setState         nameFilter  filterValue                render  function         var displayedItems   this state listItems filter function item          var match   item toLowerCase   indexOf this state nameFilter toLowerCase           return  match     -1         bind this         var content      if  displayedItems length  gt  0          var items   displayedItems map function item            return  lt li gt  item  lt  li gt                   content    lt ul gt  items  lt  ul gt        else         content    lt p gt No items matching this filter lt  p gt              return          lt div gt           lt Filters updateFilter  this handleFilterUpdate    gt           lt h4 gt Results lt  h4 gt           content         lt  div gt                  React renderComponent  lt List   gt   document body     Scenario  2 Similar to scenario  1  but the parent component will be the one passing down the handler function to  lt Filters   gt   and will pass the filtered list to  lt List   gt   I like this method better since it decouples the  lt List   gt  from the  lt Filters   gt   JSFiddle for  2        jsx React DOM     var Filters   React createClass     handleFilterChange  function         var value   this refs filterInput getDOMNode   value      this props updateFilter value          render  function         return  lt input type  quot text quot  ref  quot filterInput quot  onChange  this handleFilterChange  placeholder  quot Filter quot    gt            var List   React createClass     render  function         var content      if  this props items length  gt  0          var items   this props items map function item            return  lt li gt  item  lt  li gt                   content    lt ul gt  items  lt  ul gt        else         content    lt p gt No items matching this filter lt  p gt             return          lt div className  quot results quot  gt           lt h4 gt Results lt  h4 gt           content         lt  div gt                  var ListContainer   React createClass     getInitialState  function         return         listItems    Chicago    New York    Tokyo    London    San Francisco    Amsterdam    Hong Kong          nameFilter                   handleFilterUpdate  function filterValue        this setState         nameFilter  filterValue                render  function         var displayedItems   this state listItems filter function item          var match   item toLowerCase   indexOf this state nameFilter toLowerCase           return  match     -1         bind this         return          lt div gt           lt Filters updateFilter  this handleFilterUpdate    gt           lt List items  displayedItems    gt         lt  div gt                  React renderComponent  lt ListContainer   gt   document body     Scenario  3 When the components can t communicate between any sort of parent-child relationship  the documentation recommends setting up a global event system

User · Answer

Oddly nobody mentioned mobx  The idea is similar to redux  If I have a piece of data that multiple components are subscribed to it  then I can use this data to drive multiple components

User · Answer

I once was where you are right now  as a beginner you sometimes feel out of place on how the react way to do this  I m gonna try to tackle the same way I think of it right now    States are the cornerstone for communication  Usually what it comes down to is the way that you alter the states in this component in your case you point out three components    lt List   gt    Which probably will display a list of items depending on a filter  lt Filters   gt   Filter options that will alter your data   lt TopBar   gt   List of options   To orchestrate all of this interaction you are going to need a higher component let s call it App  that will pass down actions and data to each one of this components so for instance can look like this   lt div gt     lt List items  this state filteredItems   gt     lt Filter filter  this state filter  setFilter  setFilter   gt   lt  div gt    So when setFilter is called it will affect the filteredItem and re-render both component   In case this is not entirely clear I made you an example with checkbox that you can check in a single file   import React   Component  from  react   import  render  from  react-dom    const Person      person  setForDelete     gt               lt div gt               lt input type  checkbox  name  person  checked  person checked  onChange  setForDelete bind this  person     gt               person name             lt  div gt       class PeopleList extends Component      render          return         lt div gt          this props people map  person  i    gt             return  lt Person key  i  person  person  setForDelete  this props setForDelete    gt                      lt div onClick  this props deleteRecords  gt Delete Selected Records lt  div gt        lt  div gt                   end class  class App extends React Component      constructor props        super props      this state    people   id 1  name  Cesar   checked false   id 2  name  Jose   checked false   id 3  name  Marbel   checked false           deleteRecords         const people   this state people filter p   gt   p checked        this setState  people          setForDelete person        const checked    person checked      const people   this state people map  p   gt         if p id     person id          return  name person name  checked         return p               this setState  people           render           return  lt PeopleList people  this state people  deleteRecords  this deleteRecords bind this   setForDelete  this setForDelete bind this    gt          render  lt App  gt   document getElementById  app

User · Answer

There is such possibility even if they are not Parent - Child relationship - and that s Flux  There is pretty good  for me personally  implementation for that called Alt JS  with Alt-Container    For example you can have Sidebar that is dependent on what is set in component Details  Component Sidebar is connected with SidebarActions and SidebarStore  while Details is DetailsActions and DetailsStore   You could use then AltContainer like that   lt AltContainer stores                        SidebarStore  SidebarStore                    gt                       lt Sidebar  gt   lt  AltContainer gt    this props content    Which would keep stores  well I could use  store  instead of  stores  prop   Now   this props content  CAN BE Details depending on the route  Lets say that  Details redirect us to that view  Details would have for example a checkbox that would change Sidebar element from X to Y if it would be checked   Technically there is no relationship between them and it would be hard to do without flux  BUT WITH THAT it is rather easy   Now let s get to DetailsActions  We will create there  class SiteActions   constructor         this generateActions           setSiteComponentStore            setSiteComponent value        this dispatch  value  value          and DetailsStore  class SiteStore   constructor         this siteComponents             Prop  true             this bindListeners           setSiteComponent  SidebarActions COMPONENT STATUS CHANGED           setSiteComponent data        this siteComponents Prop   data value        And now  this is the place where magic begin   As You can see there is bindListener to SidebarActions ComponentStatusChanged which will be used IF setSiteComponent will be used   now in SidebarActions      componentStatusChanged value       this dispatch  value  value        We have such thing  It will dispatch that object on call  And it will be called if setSiteComponent in store will be used  that you can use in component for example during onChange on Button ot whatever   Now in SidebarStore we will have      constructor         this structures            this bindListeners           componentStatusChanged  SidebarActions COMPONENT STATUS CHANGED               componentStatusChanged data        this waitFor DetailsStore          findWhere this structures 0  elem   title   Example    enabled   data value      Now here you can see  that it will wait for DetailsStore  What does it mean  more or less it means that this method need to wait for DetailsStoreto update before it can update itself   tl dr One Store is listening on methods in a store  and will trigger an action from component action  which will update its own store   I hope it can help you somehow

User · Answer

There are multiple ways to make components communicate  Some can be suited to your usecase  Here is a list of some I ve found useful to know   React  Parent   Child direct communication  const Child     fromChildToParentCallback     gt       lt div onClick       gt  fromChildToParentCallback 42   gt      Click me    lt  div gt      class Parent extends React Component     receiveChildValue    value    gt        console log  Parent received value from child      value      value is 42        render         return          lt Child fromChildToParentCallback  this receiveChildValue   gt                Here the child component will call a callback provided by the parent with a value  and the parent will be able to get the value provided by the children in the parent   If you build a feature page of your app  it s better to have a single parent managing the callbacks state  also called container or smart component   and all childs to be stateless  only reporting things to the parent  This way you can easily  share  the state of the parent to any child that need it     Context  React Context permits to hold state at the root of your component hierarchy  and be able to inject this state easily into very deeply nested components  without the hassle to have to pass down props to every intermediate components   Until now  context was an experimental feature  but a new API is available in React 16 3    const AppContext   React createContext null   class App extends React Component     render         return          lt AppContext Provider value   language   en  userId  42   gt           lt div gt                           lt SomeDeeplyNestedComponent  gt                         lt  div gt         lt  AppContext Provider gt                const SomeDeeplyNestedComponent        gt       lt AppContext Consumer gt         language     gt   lt div gt App language is currently  language  lt  div gt      lt  AppContext Consumer gt       The consumer is using the render prop   children function pattern  Check this blog post for more details   Before React 16 3  I d recommend using react-broadcast which offer quite similar API  and use former context API     Portals  Use a portal when you d like to keep 2 components close together to make them communicate with simple functions  like in normal parent   child  but you don t want these 2 components to have a parent child relationship in the DOM  because of visual   CSS constraints it implies  like z-index  opacity       In this case you can use a  portal   There are different react libraries using portals  usually used for modals  popups  tooltips      Consider the following    lt div className  a  gt      a content      lt Portal target  body  gt           lt div className  b  gt              b content          lt  div gt       lt  Portal gt   lt  div gt    Could produce the following DOM when rendered inside reactAppContainer    lt body gt       lt div id  reactAppContainer  gt           lt div className  a  gt               a content          lt  div gt       lt  div gt       lt div className  b  gt           b content      lt  div gt   lt  body gt    More details here    Slots  You define a slot somewhere  and then you fill the slot from another place of your render tree   import   Slot  Fill   from  react-slot-fill    const Toolbar    props    gt     lt div gt       lt Slot name  ToolbarContent    gt     lt  div gt   export default Toolbar   export const FillToolbar     children     gt     lt Fill name  ToolbarContent  gt       children     lt  Fill gt    This is a bit similar to portals except the filled content will be rendered in a slot you define  while portals generally render a new dom node  often a children of document body   Check react-slot-fill library    Event bus  As stated in the React documentation      For communication between two components that don t have a parent-child relationship  you can set up your own global event system  Subscribe to events in componentDidMount    unsubscribe in componentWillUnmount    and call setState   when you receive an event    There are many things you can use to setup an event bus  You can just create an array of listeners  and on event publish  all listeners would receive the event  Or you can use something like EventEmitter or PostalJs    Flux  Flux is basically an event bus  except the event receivers are stores  This is similar to the basic event bus system except the state is managed outside of React  Original Flux implementation looks like an attempt to do Event-sourcing in a hacky way   Redux is for me the Flux implementation that is the closest from event-sourcing  an benefits many of event-sourcing advantages like the ability to time-travel  It is not strictly linked to React and can also be used with other functional view libraries   Egghead s Redux video tutorial is really nice and explains how it works internally  it really is simple      Cursors  Cursors are coming from ClojureScript Om and widely used in React projects  They permit to manage the state outside of React  and let multiple components have read write access to the same part of the state  without needing to know anything about the component tree   Many implementations exists  including ImmutableJS  React-cursors and Omniscient  Edit 2016  it seems that people agree cursors work fine for smaller apps but it does not scale well on complex apps  Om Next does not have cursors anymore  while it s Om that introduced the concept initially     Elm architecture  The Elm architecture is an architecture proposed to be used by the Elm language  Even if Elm is not ReactJS  the Elm architecture can be done in React as well   Dan Abramov  the author of Redux  did an implementation of the Elm architecture using React   Both Redux and Elm are really great and tend to empower event-sourcing concepts on the frontend  both allowing time-travel debugging  undo redo  replay     The main difference between Redux and Elm is that Elm tend to be a lot more strict about state management  In Elm you can t have local component state or mount unmount hooks and all DOM changes must be triggered by global state changes  Elm architecture propose a scalable approach that permits to handle ALL the state inside a single immutable object  while Redux propose an approach that invites you to handle MOST of the state in a single immutable object   While the conceptual model of Elm is very elegant and the architecture permits to scale well on large apps  it can in practice be difficult or involve more boilerplate to achieve simple tasks like giving focus to an input after mounting it  or integrating with an existing library with an imperative interface  ie JQuery plugin   Related issue   Also  Elm architecture involves more code boilerplate  It s not that verbose or complicated to write but I think the Elm architecture is more suited to statically typed languages     FRP  Libraries like RxJS  BaconJS or Kefir can be used to produce FRP streams to handle communication between components   You can try for example Rx-React  I think using these libs is quite similar to using what the ELM language offers with signals   CycleJS framework does not use ReactJS but uses vdom  It share a lot of similarities with the Elm architecture  but is more easy to use in real life because it allows vdom hooks  and it uses RxJs extensively instead of functions  and can be a good source of inspiration if you want to use FRP with React  CycleJs Egghead videos are nice to understand how it works     CSP  CSP  Communicating Sequential Processes  are currently popular  mostly because of Go goroutines and core async ClojureScript  but you can use them also in javascript with JS-CSP   James Long has done a video explaining how it can be used with React   Sagas  A saga is a backend concept that comes from the DDD   EventSourcing   CQRS world  also called  process manager    It is being popularized by the redux-saga project  mostly as a replacement to redux-thunk for handling side-effects  ie API calls etc   Most people currently think it only services for side-effects but it is actually more about decoupling components    It is more of a compliment to a Flux architecture  or Redux  than a totally new communication system  because the saga emit Flux actions at the end  The idea is that if you have widget1 and widget2  and you want them to be decoupled  you can t fire action targeting widget2 from widget1  So you make widget1 only fire actions that target itself  and the saga is a  background process  that listens for widget1 actions  and may dispatch actions that target widget2  The saga is the coupling point between the 2 widgets but the widgets remain decoupled   If you are interested take a look at my answer here    Conclusion  If you want to see an example of the same little app using these different styles  check the branches of this repository    I don t know what is the best option in the long term but I really like how Flux looks like event-sourcing    If you don t know event-sourcing concepts  take a look at this very pedagogic blog  Turning the database inside out with apache Samza  it is a must-read to understand why Flux is nice  but this could apply to FRP as well   I think the community agrees that the most promising Flux implementation is Redux  which will progressively allow very productive developer experience thanks to hot reloading  Impressive livecoding ala Bret Victor s Inventing on Principle video is possible

[javascript] ReactJS Two components communicating

Examples related to javascript

Examples related to reactjs

Examples related to higher-order-components