У меня есть приложение React / Redux, которое работает с «обработчиками», хранящимися в хранилище Redux, и компонентами React, которые связаны с этими обработчиками. Эти обработчики сохраняются в нормализованной плоской структуре и передаются друг другу с уникальными идентификаторами.
Я хочу обновить элемент реагирования всякий раз, когда кто-либо из его потомков обновляет свою модель в хранилище.
// Redux state
const state = {
h1: { name: "1", child: "h2" },
h2: { name: "2", child: "h3" },
h3: { name: "3", child: null }
};
// Helper function
const GetName = h => (h.child ? `${GetName(state[h.child])} in ${h.name}` : h.name);
// Component.jsx
class Handler extends React.Component {
render = () => (
<div>
<div>Component {this.props.model.name} ({GetName(this.props.model))}</div>
{this.props.model.child && <Handler id={this.props.model.child} />}
</div>
);
}
export default connect(
Handler,
(state, ownProps) => ({
model: state[ownProps.id]
})
);
Вот упрощенный пример моего кода. Вывод здесь должен выглядеть примерно так:
Component 1 (3 in 2 in 1)
Component 2 (3 in 2)
Component 3 ()
В моем коде функция GetName более сложная, но основная идея состоит в том, что она создает «имя» обработчика. Теперь моя проблема в том, что, например, когда я обновляю третий обработчик, имя первого обработчика не обновляется, так как реагирует, не обновлял его компонент.
Есть ли способ сказать реагировать, что этот компонент должен обновляться всякий раз, когда состояниеизменен нисходящий обработчик или есть другой более простой способ?