hamed
4 سال پیش توسط hamed مطرح شد
0 پاسخ

optimistic update برای like و dislike در react native

سلام
من میخوام یه همچین چیزی
https://cdn-images-1.medium.com/max/1000/1*i5iv7nAiQWdyuIlKDHidDA.gif
با استفاده از ریکت نیتیو و ریداکس بسازم که همون طور که مشخصه قابلیت like و dislike و تعداد like ها رو داره. این هم کامپوننتم هست ولی نمیدونم شرط داخل componentDidUpdate رو چطوری بزارم که منجر به ایجاد اپدیت های مکرر نشه:

class PlayingVideo extends Component {
constructor(props) {
super(props);
this.state = {
likedThis: _.includes(this.props.video.likedBy, this.props.user_id),
likedLength: this.props.video.likedBy.length
};
}

componentDidUpdate(prevProps, prevState, snapshot) {
if (this.props.likeVideoHasError) {
this.setState({
likedThis: false,
likedLength: this.state.likedLength - ۱
});
}
if (this.props.dislikeVideoHasError) {
this.setState({
likedThis: true,
ikedLength: this.state.likedLength + ۱
});
}
}

like = () => {
if (this.props.likeVideoPending || this.props.dislikeVideoPending) return;
this.setState({ likedThis: true, likedLength: this.state.likedLength + ۱ });
this.props.dispatch(likeVideo(this.props.videoId));
};
dislike = () => {
if (this.props.likeVideoPending || this.props.dislikeVideoPending) return;
this.setState({
likedThis: false,
likedLength: this.state.likedLength - ۱
});
this.props.dispatch(dislikeVideo(this.props.videoId));
};

}
const mapStateToProps = (state, ownProps) => {
return {
likeVideoHasError: state.video.likeVideoHasError,
dislikeVideoHasError: state.video.dislikeVideoHasError,
likeVideoPending: state.video.likeVideoPending,
dislikeVideoPending: state.video.dislikeVideoPending
};
};

export default connect(mapStateToProps)(PlayingVideo);


تگ‌های محبوب
لاراول
php
laravel
متفرقه
reactjs
عمومی
html_css
nodejs
vuejs
وردپرس
پایتون
css
فلاتر
react
javascript
ثبت پرسش جدید

ثبت اولین پاسخ و دریافت ۵۰ امتیاز

به hamed کمک کن تا مشکل خودش رو حل کنِ، اینطوری میتونیم باهم پیشرفت کنیم.

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام