mapStateToProps not called when component renders self - react-native

Question

I have a Node component that is rendering its children using the same Node function. For some reason, the mapStateToProps method is only called for the first node, but not for any of its children.
import * as React from "react";
import { View } from "react-native";
import { connect } from "react-redux";
function Node({ node, nodeId }) {
return (
<View>
{node.children.map((id) => (<Node key={id} nodeId={id} />))}
</View>
);
}
const mapStateToProps = (state, ownProps) => {
// This log is not called for children
console.log(ownProps.nodeId, "Mapping state to props");
return {
node: state.nodes[ownProps.nodeId],
};
};
export default connect(mapStateToProps)(Node);
The only way I can get it to work is by creating a NodeB component in another file (won't work if it's not an import from another file) that renders a Node. Like so:
export function NodeB(props) {
return <Node {...props} />;
}
The problem with that is that I get a Require cycle warning because NodeB import Node and Node imports NodeB....
Any idea why this is happening?

Answer 1

That's because children Node components are not connected to redux store by default. To fix that try the following:
import * as React from "react";
import { View } from "react-native";
import { connect } from "react-redux";
function Node({ node, nodeId }) {
return (
<View>
{node.children.map((id) => <ConnectedNode key={id} nodeId={id} />)}
</View>
);
}
const mapStateToProps = (state, ownProps) => { ... };
const ConnectedNode = connect(mapStateToProps)(Node);
export default ConnectedNode;