В моем приложении я хочу, чтобы пользователи могли оставлять комментарии и ставить лайки. Поэтому я создал дерево компонентов со следующей структурой
- Верхний компонент
- Просмотр компонента
- 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
});
};