0

enter image description here

I have a parent component C and it's two children A and B. Suppose I got some data after calculating in B component I want to pass directly to A component without using parent component C.

How can I do that and how many ways to do that? Does it help here redux or Context API ?

Subhajit Panja
  • 1,230
  • 1
  • 9
  • 22

2 Answers2

1

Yes, you can use redux here to communicate with component A without using the parent component. Pass the data from component B to an action creator which will then, dispatch an action to a reducer. The reducer will return the state(which now holds the data) that you can access from component A. You will need to connect both A & B to the redux store.

Suppose you want "data" that you have in component A to also be accessible in component B.

class A extends React.Component{
  //call this.props.actionCreator and pass it the data
}
export default connect(null, actionCreators)(A)

The action creator recieves the data, wraps it in an action and dispatches to the reducer. The reducer returns the data, which becomes part of the state.

class B extends React.Component{
  //We can access data as this.props.data here
}
function mapDispatchToProps(state) {
   return {data: state.LoginReducer.data};
}
export default connect(mapDispatchToProps, actionCreators)(B)

We then specify what piece of state we want inside mapDispatchToProps and pass it to the connect helper. The connect helper makes the data available as this.props.data inside component B.

I hope I explained it well enough.

Faisal Arshed
  • 543
  • 1
  • 4
  • 14
  • Here is only one question from your answer; Generally I dispatch an action to a reducer and it gets back new state to same component (suppose I have login form B component and calling dispatch an action via mapDispatchToProps and connect function and I always return or replied new state from reducer and use state data mapStateToProps in the same component but If I want to get state to both A and B component. How Can I achieve it? suppose A is my dashboard component or anything) how can I connect both A & B component to the redux store and get data same time? – Subhajit Panja Mar 09 '19 at 05:49
  • 1
    You can use mapstatetoprops in both the components. Subscribe to the same reducer – 10101010 Mar 09 '19 at 05:54
  • but If I have a dashboard and there is already another reducer exists, in this case, I think it is not possible because I don't know that it(One component) can access multiple reducers or not – Subhajit Panja Mar 09 '19 at 06:03
  • I don't get your point. You can access as many reducers you want – 10101010 Mar 09 '19 at 06:06
  • @10101010 suppose I have got login data after getting the new state from login reducer. Can I use login reducer state in product dashboard component with its own(dashboard reducer) reducer Then my problem is solved. – Subhajit Panja Mar 09 '19 at 06:11
  • I think that your doubt is appropriate for a new question as it is unrelated to the current question. – 10101010 Mar 09 '19 at 06:14
  • no its not I'm giving you just a senirio, because example best thing to understand thats all – Subhajit Panja Mar 09 '19 at 06:17
  • 1
    @SubhajitPanja you can connect both A & B components to as many reducers you want. However, you only need one reducer for one piece of state. You can then connect both A & B to store and access the data in the store. That's what Redux is for. It centralizes your app state so you can access it anywhere. I'll edit my answer to provide an example. – Faisal Arshed Mar 09 '19 at 07:36
  • 1
    @fsociety now Reducer is clear to me from your explanation. – Subhajit Panja Mar 09 '19 at 07:53
1

If you don't want to lift your state up to the parent then, both redux or Context API is a good option, however, if you're not using redux already in your project then I would suggest trying to use Context API,

  • redux comes with a lot of boilerplate code, using redux for just two component is overkill.
  • redux store is global to your project if you want to share data between just two siblings with Context API you can just wrap those with a Context Provider
Prithwee Das
  • 4,628
  • 2
  • 16
  • 28
  • OK Now, I got it. Both will use the same calculation state as you mention as "lift your state up" and using context API, that can consume in A and B. right? – Subhajit Panja Mar 09 '19 at 06:36
  • 1
    Yes, for your convenience let me show you an example [code](https://codesandbox.io/s/rr7okvlq54) Now with this, if I want to share this user between two siblings I can just wrap those two with the provider and use the consumer to access the data in the siblings – Prithwee Das Mar 09 '19 at 06:42
  • Your code is more helpful to me because I always find a proper way to pass multiple data in a single Context API Provider – Subhajit Panja Mar 09 '19 at 06:54
  • 1
    You can use the `Provider` state as any other react component state and have multiple data in it. – Prithwee Das Mar 09 '19 at 06:57