Я столкнулся с повторяющейся моделью на моем сайте react-redux: Компонент отображает данные из веб-api, и он должен быть заполнен при загрузке, автоматически, без какого-либо взаимодействия с пользователем.
Я хочу инициировать асинхронную выборку из компонента контейнера, но насколько я могу сказать, единственный способ сделать это - это событие жизненного цикла в компоненте отображения. Это, похоже, делает это невозможно поместить всю логику в контейнер и использовать только неработающие функциональные компоненты без состояния для отображения.
Это означает, что я не могу использовать функциональный компонент без состояния для любого компонента, который нуждается в данных async. Это не кажется правильным.
Кажется, что "правильным" способом было бы как-то инициировать асинхронные вызовы из контейнера . Затем, когда вызов будет возвращен, состояние будет обновлено, и контейнер получит новое состояние и, в свою очередь, передаст их своему безгражданному компоненту через mapStateToProps().
Выполнение асинхронных вызовов в mapStateToProps и mapDispatchToProps (я имею в виду фактически вызов функции async, а не возврат его как свойства) не имеет смысла.
Итак, что я закончил делать, это поместить асинхронный вызов в функцию refreshData(), открытую mapDispatchToProps(), а затем вызвать его из двух или более методов жизненного цикла React: componentDidMount and componentWillReceiveProps.
Есть ли чистый способ обновления состояния хранилища redux без применения вызовов метода жизненного цикла в каждом компоненте, который нуждается в данных async?
Должен ли я делать эти вызовы выше иерархии компонентов (тем самым уменьшая объем этой проблемы, поскольку только компоненты "верхнего уровня" должны будут прослушивать события жизненного цикла)?
Изменить:
Просто так нет путаницы, что я подразумеваю под компонентом connect() ed container, здесь очень простой пример:
import React from 'react';
import { connect } from 'react-redux';
import {action} from './actions.js';
import MyDumbComponent from './myDumbComponent.jsx';
function mapStateToProps(state)
{
return { something: state.xxxreducer.something };
}
function mapDispatchToProps(dispatch)
{
return {
doAction: ()=>{dispatch(action())}
};
}
const MyDumbComponentContainer = connect(
mapStateToProps,
mapDispatchToProps
)(MyDumbComponent);
// Uh... how can I hook into to componentDidMount()? This isn't
// a normal React class.
export default MyDumbComponentContainer;