CODEWITHSUNDEEP
javascriptreactjsreact-nativereduxreact-redux
ANewmy
ANewmy

Reputation: 51

Connecting components to redux global state v.s passing props down to children components in React-Native

I'm having trouble understanding when I should be passing props down to child components rather connecting those components directly to the state.

There are two ways that components in my project receive props:

1) Connecting a component (child or parent) to the global state of redux. This allows me to specify which parts of the global state my component will receive, but will re-render when a prop changes.

const mapStateToProps = state => ({
    error: state.error,
    progress: state.scan.progress,
    latitude: parseFloat(state.enrollment.latitude),
    longitude: parseFloat(state.enrollment.longitude),
});

export default connect(mapStateToProps)(MapViewHome);

2) Passing props down to child components in typical React-Native fashion.

<MapViewHome error={this.props.error} progress={this.props.progress} latitude={this.props.latitude} longitude={this.props.longitude} />

The reason I'm asking this is because I have parent component A which is connected to the state.

Parent component A passes prop x directly to child B which passes the same prop x to child C.

If prop x changes, this will cause components A, B, and C to re render. I could avoid the re rendering of components A and B by connecting child C directly to the state, so that it is the only component effected by the prop change.

But is it good practice to connect small child components to the global state like that? Why not just connect every component to the state?

Upvotes: 5

Views: 2499

Answers (3)

Aaron
Aaron

Reputation: 1306

Typically, you don't need to use your store when you're capturing form data or if you're simply trying to hide and unhide elements. For example, you might want to have the local state change when you're typing data in a field and then you might use that local state to pass down to a thunk creator that you're dispatching. If you can provide a bit more context about what specifically you are trying to achieve here, I'd be happy to provide more guidance!

Upvotes: 0

Andy Mai
Andy Mai

Reputation: 94

The main advantage of using stateless components is reusability. Using your example, a stateless version of MapViewHome could be used to display multiple maps of different lat/lngs on the screen at the same time since you can pass different props to each one. A stateful MapViewHome could only display one since it relies on global state.

So it's really up to you how to want to architect your components. I think it's a good idea to always start with stateless components but if your use case doesn't require reusability then using a stateful component is fine.

Upvotes: 0

Magnum
Magnum

Reputation: 2395

This is a complex issue that the redux / react community discuss a ton.

You can probably find tons of Medium articles and React / Redux authors that discuss this.

But to give you a high level overview; If it seems like it's a pain to 'drill' props down from CompA -> CompB -> CompC -> CompD, store the data in redux.

If the data only needs to go from CompD -> CompE, you can pass it down as props.

You could store every prop that needs to be shared into redux as well. Just be aware of managing your redux object and try to normalize and manage the giant object.

Ultimately, it is up to you as the developer to make these decisions, as there is no silver bullet for this answer.

Upvotes: 1

Related Questions