mapStateToProps не вызывается, когда компонент отображает себя

Question

У меня есть компонент Node, который отображает своих потомков с помощью той же функции Node. По какой-то причине метод mapStateToProps вызывается только для первого узла, но не для любого из его дочерних узлов.

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);

Единственный способ заставить его работать - это создать NodeB компонент в другом файле (не будет работать, если это не импорт из другого файла), который отображает Node. Примерно так:

export function NodeB(props) {
    return <Node {...props} />;
}

Проблема в том, что я получаю предупреждение Require cycle, потому что NodeB импортирует Node, а Node импортирует NodeB ....

Есть идеи, почему это происходит?

Answer 1

Это потому, что дочерние компоненты Node по умолчанию не подключены к хранилищу redux. Чтобы исправить это, попробуйте следующее:

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;