Чтобы отправить экшн при загрузке компонента, используй метод жизненного цикла componentDidMount(). Это гарантирует, что экшн сработает после того, как компонент смонтируется в DOM.
Отправь свой экшн в componentDidMount() и используй полученные данные в методе render(), чтобы условно выводить контент в зависимости от состояния загрузки.
class App extends Component {
componentDidMount() {
this.props.fetchData()
}
render() {
return this.props.isLoaded ? (
<div>Loaded</div>
) : (
<div>Not Loaded</div>
)
}
}
const mapStateToProps = (state) => ({
isLoaded: state.isLoaded
})
const mapDispatchToProps = {
fetchData
}
export default connect(mapStateToProps, mapDispatchToProps)(App)
componentDidMount() — идеальный метод жизненного цикла для побочных эффектов вроде загрузки данныхmapDispatchToProps связывает dispatch твоего экшна с пропсами компонентаmapStateToProps подтягивает состояние Redux в пропсы компонента для условного рендераДля функциональных компонентов с хуками используй useEffect() с пустым массивом зависимостей — результат будет тот же.
Метод жизненного цикла componentDidMount() вызывается до того, как компонент будет добавлен в DOM, что делает его подходящим для инициализации загрузки данных, которые должны завершиться до рендера.
Новый — ещё не проверен сообществом
Вы