React sharing data between components

Consider this diagram:

I need to change C2 component state when C4 button click event is fired.

Since they don’t have a direct relationship i cannot access to C2 state directly from C4.

I know there are some possible hacks to solve this problem
(e.g. Meteor Session, pass data through each component, flux-based Action/Dispatcher).

React docs recommends to use event/subscribe system (flux is a possible solution, but flux is much more that this…)

I need a scalable solution for medium/large applications with a high number of component views

What’s the “right” way to solve that problem?

1 Like

For me only one answer: redux…

you mean there is an official redux package for meteor?

you mean there is an official redux package for meteor?

No… I mean simple redux npm package.

For anyone facing the same problem, I spent some days looking inside redux and react-redux…

Redux is an awesome library and its concepts are very appreciable.

Redux is not meant to solve the problem of data sharing in react or general apps. It is more than this…

Although it can still do it (you have to put all your sharing data into redux state - redux state is mainly for application logic and you’ll end up dirtying the state - maybe i’m wrong on this), it is thought to maintain a single global state to simplify component dependencies, facilitate developing app logic, refactoring, bug fixing and offer some nice feature like time travel.

If i need a container for my app state then surely i’ll use redux.
But for a trivial task like data sharing between views component I think redux is too complex, maybe i will implementing a simple global data sharer system…

two good guides on “how Redux in Meteor” (i haven’t yet tested):

Since meteor supports and recommends React and since Redux is part of the React repository (yes! Dan Abramov works at Facebook), it would be nice that in the next weeks (probably months) there will be an integration of Redux in the Meteor React-tutorial.

1 Like