Я создаю веб-приложение с промежуточным программным обеспечением React & Redux + Thunk и изо всех сил пытаюсь найти лучший шаблон для соединения моих компонентов с данными.
У меня есть 3 различных презентационных компонента, которые все полагаются наобъект профиля пользователя, который извлекается из API и хранится в состоянии Redux.Я создал функцию более высокого порядка, чтобы обернуть каждый из этих компонентов, предоставив им объект профиля пользователя.
Этот компонент более высокого порядка подключен к Redux и использует селекторы для получения данных из хранилища Redux.
const withUser = WrappedComponent => {
class WithUser extends Component {
render = () => {
const {loading, user} = this.props
return <WrappedComponent user={user} loading={loading} {...this.props} />
}
}
const loading = isLoading(['USER_GET'])
const user = getCurrentUser()
return connect(
state => ({ loading: loading(state), user: user(state) }),
{}
)(WithUser)
}
export default withUser
Вот пример одного из моих презентационных компонентов.
const Profile = props => {
const {name, profileImage} = this.props.user
return (
<Wrapper>
<Avatar src={profileImage} />
<h2>{name}</h2>
</Wrapper>
)
}
export default withUser(Profile)
Суть моего вопроса: где оптимальное место для получения пользовательских данных?Поскольку я хочу, чтобы эти компоненты были полностью независимыми и не зависели от контекста, моей первой мыслью было получение данных с использованием ловушки жизненного цикла componentDidMount
в компоненте более высокого порядка:
componentDidMount = () => {
const {getUser, loading, user} = this.props
if (!loading && !user) getUser()
}
Мысль, стоящая за этим, заключается в том, чтоесли в состоянии Redux еще нет пользователя, а другой компонент еще не извлекает его, вызовите getUser()
.Поначалу казалось, что это работает отлично, но возникли проблемы, когда я загружаю страницу, которая инициализирует несколько компонентов, обернутых withUser()
одновременно.getUser()
отправил несколько запросов на выборку пользовательских данных, прежде чем загрузчик даже обнаружил, что данные извлекаются, что делает !isLoading
избыточным.
Есть ли лучший способ подойти к этой ситуации?Любая помощь приветствуется.
ОБНОВЛЕНИЕ: я могу получить рабочее решение, извлекая данные, используя getUser
в функции constructor
компонента более высокого порядка.
constructor(props) {
super(props)
const { getUser, loading, user } = props
if (!loading && !user) {
getUser()
}
}
Насколько я понимаю,что выборка данных в конструкторе НЕ является хорошей практикой и ее следует избегать.Мысли?