Где получать и отправлять данные в очень вложенном дереве компонентов - PullRequest
0 голосов
/ 24 апреля 2018

В моем приложении я хочу, чтобы пользователи могли оставлять комментарии и ставить лайки. Поэтому я создал дерево компонентов со следующей структурой

  • Верхний компонент
    • Просмотр компонента
      • TopBar
      • Body
        • Авторская карточка
        • Открытка
        • Комментарий сек
        • Компонент с плавающей точкой, как у кнопки

При загрузке верхний компонент извлекает данные. Пока он выбирает, компонент body покажет предварительный загрузчик. После выборки отправляет данные в представление (user_data) -> topbar и представление (post_data) -> body. Все работает хорошо, пока я не попытаюсь комментировать. Компонент комментария отправляет комментарий в тело -> вид -> верх. И после повторного рендеринга снова показывает предварительный загрузчик. Это также происходит, когда я нажимаю кнопку «Мне нравится». Так есть ли способ избежать этого? Заранее благодарен

EDIT:

Верхний компонент добавить комментарий: данные из компонента Комментарий

addComment = data => {
        this.props.add_comment(data).then(
            () => {
                this.props.fetch_data();
                if (this.props.isLoggedIn) {
                    this.props.fetch_user_data();
                }
            }
        );
    }

mapStateToDispatch:

const mapDispatchToProps = dispatch => {
    return {
        // recieve data
        fetch_user_data: () => dispatch(fetch_user_data()),

        // upload data
        add_comment: data => dispatch(add_comment(data)),
        reply_comment: data => dispatch(reply_comment(data))
    };
};

Редукс-действие:

export const add_comment = data => {
    return dispatch => {
        dispatch(sendComment());

        const headers = {
            method: 'POST',
            body: JSON.stringify({ query: mutations.create_comment(data) }),
            headers: {
                'Content-Type': 'application/json'
            }
        };

        return fetch('http://192.168.43.200:5000/graphql', headers).then(
            res => {
                dispatch(requestCommentFinished());
                return res.json();
            }
        );
    };
};

requestCommentFinished редуктор:

const requestCommentFinished = state => {
    const isSendingComment = false;
    return updateObject(state, {
        isSendingComment
    });
};
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...