Извлечение дубликатов данных с помощью компонентов Redux и высшего порядка - PullRequest
0 голосов
/ 20 ноября 2018

Я создаю веб-приложение с промежуточным программным обеспечением 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()
    }
}

Насколько я понимаю,что выборка данных в конструкторе НЕ является хорошей практикой и ее следует избегать.Мысли?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...