Clash Royale CLAN TAG

How to pass data in nested components?

I wonder how to pass data in nested components.
I'm making an app using react-native with react-redux, redux-thunk, redux-persist.

Based on what I understand about the conception of redux, even though it is consist of nested components, can get or update state from store.
However, I'm doing that only pass data as props from parent component to children components.
I guess it is not correct usage of redux because the more depth is deeper, the more I have to call functions of parent components.
Sounds weird, right?
If you see my code, then you would understand what I'm talking about.

Here's my code.

UPDATED
For example, code structure is like bellow.
If I want to call action in grandChild component, Should I go up to parent Component?

parent.js

...

getData = async () => {
await Actions.func();
}

render() {
return (
<Parent>
<Child data={data} getData={this.getData}/>
</Parent>
);
}


child.js

...
childFunc(){
this.props.getData();
}

<Child>
<GrandChild grandChildFunc={this.childFunc}/>
</Child>


GrandChild.js

...
componentDidMount() {
this.props.childFunc();
}

render() {
return (
<View>
<Text>Example</Text>
<View>
);
}


I want to figure out of redux cause reducer is called twice now, but I have no idea what happen here.

If you give any advice, it would be helpful for me.
Thank you!

1 Answer
1

I'm not sure about the right way. But I'm doing with components:

props

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.