CODEWITHSUNDEEP
javascriptreactjs
Piotr Wu
Piotr Wu

Reputation: 1362

Passing data from distant component

I am wondering if there is some better way to communicate between distant components. In my case I have structure like this:

<div>
  <History />
  <Board>
    <BoxesView>
      <DataBox>
        <TagBoxItem />
      </DataBox>
    </BoxesView>
  </Board>
</div>

and I need to send some data from TagBoxItem to History (in TagBoxItem onClick action will add new item to History). And the simplest solution is to just make some callbacks and pass step by step data from TagBoxItem to main div and next pass it to History. But is this really the best way to do it ?

Upvotes: 2

Views: 79

Answers (3)

Jim
Jim

Reputation: 1141

myself is one of the few that dislike flux. Although I tried reflux, original flux, but I just want something more simple, and also for other to learn / debug, so I have Rxjs instead. take a look at this article

http://qiita.com/kimagure/items/22cf4bb2a967fcba376e

Upvotes: 1

Phi Nguyen
Phi Nguyen

Reputation: 3056

as Eugene's answer, using Flux pattern is always a recommended way. If you don't want to use it, you can try create a global event system. I added the link if you are interested.

Upvotes: 1

Yevgen Safronov
Yevgen Safronov

Reputation: 4033

This is a valid case to explore Flux pattern. You will initiate actions through action creators in TagBoxItem, which through dispatcher will be propagated to History Store. On History Store change you will rerender History component.

Similar to Flux there is also Redux state container which gains a lot of attention at the moment. The important difference instead of multiple stores you save all the state in a single store, you will create history reducer for your case. Explore the Gist for more details.

Upvotes: 3

Related Questions