У меня есть некоторые данные, загруженные в store после первоначального вызова Axios.
Затем я визуализирую два компонента match (родительский компонент) и player (дочерний компонент).
Это способ показать два компонента связанным образом (это упрощенный пример из моего исходного кода, в этом примере я мог бы решить свою проблему по-другому, но в моем сложном реальном коде важно выполнять операции в сначала дочерний компонент):
match.js
class Match extends Component {
constructor(props) {
super(props);
}
render() {
return (
Object.values(this.props.matchs).map(( match_id ) => {
let match = this.props.matchs[match_id];
return (
<div key={match_id}>
<p>{match.tournament}</p>
<p>{match.color}</p> {/* this color depends of children condition*/ }
<div className="players">
{match.array_players.map ( ( player_id ) => {
let player = this.props.players[player_id];
return (
<Player key={odd_id} ownPlayer={player} />
)
})
</div>
</div>
)
});
)
}
}
const mapStateToProps = state => {
return {
matchs: state.matchs.matchs,
players: state.players.players
};
}
const mapDispatchToProps = dispatch => {
return {
// actions
};
}
export default connect(mapStateToProps, mapDispatchToProps)(Matchs);player.js
class Player extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<p>{this.props.ownPlayer.name}</p>
<p>{this.props.player_color}</p>
</div>
);
}
}
const mapStateToProps = (state, ownProps) => {
// I need to make some previous operations before render
let player_color;
if (ownProps.ownPlayer.name == "paul")
player_color = 'yellow';
else
player_color = 'blue';
// Then I Need to update parent component with children color condition
// if (player_color == 'yellow')
// match_color = 'yellow'
//
// Call some action here to update parent component???
// things like these do not work:
// let id_p = ownProps.player.id_player;
// state.players.players[id_p].color = 'blue'; This does not work
return {
player_color
};
};
const mapDispatchToProps = dispatch => {
return {
//
}
};
}
export default connect(mapStateToProps, mapDispatchToProps)(Player);Затем мне нужно обновить реквизит в родительском компоненте после некоторых условий в дочернем компоненте.
Я прочитал эту статью:
https://redux.js.org/docs/recipes/ComputingDerivedData.html
Но я не знаю, как отправлять данные для хранения и обновления родительского компонента перед рендерингом.
Я думал о том, чтобы вызвать действие в componentWillMount или componentWillUpdate для отправки данных в хранилище, но я не знаю, правильно ли это.
