#reactjs #redux
#reactjs #redux
Вопрос:
Как обновить состояние реквизита, когда пользователю нравится сообщение?
Реквизиты должны автоматически обновляться, когда пользователь нажимает «Нравится«.
В настоящее время пользователь может поставить лайк сообщению, и только при обновлении страницы я могу видеть обновленное количество лайков, которое отображается на
{this.props.likeCount}
Какой жизненный цикл компонента лучше всего подходит для просмотра обновленных реквизитов без обновления страницы? это приложение использует redux.
Like.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCoffee, faAdjust } from '@fortawesome/free-solid-svg-icons';
import {connect} from 'react-redux';
import { getLikeCount} from '../actions/';
class Like extends Component{
constructor(props){
super(props);
this.state = {
likes: null
}
}
getLikes = (id) => {
// console.log(id);
this.props.getLikeCount(id)
console.log(this.props.likeCount)
}
render(){
return(
<div style={{float:'right', fontSize: '1.5em', color:'tomato'}} >
<i style={{ marginRight: '140px'}} className="fa fa-heart-o">
<span style={{ marginLeft: '6px'}}>
<a href="#" onClick={this.props.like}>Like </a>
{this.getLikes(this.props.postId)}
</span>
{/* gets the like counts */}
{this.props.likeCount}
</i>
</div>
)
}
}
const mapStateToProps = (state) => ({
isEditingId: state.post.isEditingId,
likeCount:state.post.likes
})
const mapDispatchToProps = (dispatch) => ({
// pass creds which can be called anything, but I just call it credentials but it should be called something more
// specific.
getLikeCount: (id) => dispatch(getLikeCount(id)),
// Pass id to the DeletePost functions.
});
export default connect(mapStateToProps, mapDispatchToProps)(Like);
Actions.js
export const getLikeCount = (id) => {
return (dispatch, getState) => {
return Axios.get(`/api/posts/likes/count/${id}`)
.then( (res) => {
const data = res.data
console.log(data);
dispatch({type: GET_LIKES_COUNT, data})
})
}
}
Редуктор
import { GET_LIKES_COUNT} from '../actions/';
const initialState = {
post: [],
postError: null,
posts:[],
isEditing:false,
isEditingId:null,
likes:[],
postId:null
}
export default (state = initialState, action) => {
switch (action.type) {
case GET_LIKES_COUNT:
// console.log(action.data)
return({
...state,
likes:action.data
})
default:
return state
}
}
редактировать (я получаю странный бесконечный цикл post)
Комментарии:
1. для получения дополнительной информации о redux смотрите Эту страницу: redux.js.org/basics/example
Ответ №1:
Обновите код до следующего кода.
GET_LIKES_COUNT обрабатывает действие api для получения количества лайков для публикации.
Без этого для рендеринга всегда будет установлено значение 0 лайков.
ADD_LIKE action предоставляет ему функциональность обновления состояния без обновления страницы.(я знаю, что это более конкретный термин, который они называют в react, возможно, его повторный рендеринг) Обновите состояние без повторного рендеринга компонента, а также самую важную часть, которая вызывает вызов api для серверной части, чтобы позволить пользователю лайкать сообщение. Мы устанавливаем лайки равными 0, чтобы можно было проголосовать за состояние и обновить его без обновления.
Спасибо за помощь @novonimo.
Редуктор
import { GET_LIKES_COUNT, ADD_LIKE} from '../actions/';
const initialState = {
post: [],
postError: null,
posts:[],
isEditing:false,
isEditingId:null,
likes:0,
postId:null
}
export default (state = initialState, action) => {
switch (action.type) {
// get number of likes from api
case GET_LIKES_COUNT:
// console.log(action.data)
return({
...state,
likes:action.data
})
case ADD_LIKE:
return({
...state,
likes: state.likes 1
})
default:
return state
}
}
Действия
export const postLike = (id) => {
return (dispatch) => {
// console.log(userId);
return Axios.post('/api/posts/like', {
postId: id
}).then( (like) => {
dispatch({type: ADD_LIKE})
// console.log('you have liked this', like)
}).catch( (err)=> {
console.log('there seem to be an error', err);
})
}
}
export const getLikeCount = (id) => {
return (dispatch, getState) => {
return Axios.get(`/api/posts/likes/count/${id}`)
.then( (res) => {
const data = res.data
console.log(data);
dispatch({type: GET_LIKES_COUNT, data})
})
}
}
PostItem.js
import React, { Component } from 'react';
import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import moment from 'moment';
import Editable from './Editable';
import {connect} from 'react-redux';
import {UpdatePost, getLikeCount, postLike} from '../actions/';
import Like from './Like';
import Axios from '../Axios';
const Styles = {
myPaper: {
margin: '20px 0px',
padding: '20px'
},
button:{
marginRight:'30px'
}
}
class PostItem extends Component{
constructor(props){
super(props);
this.state = {
disabled: false,
}
}
onUpdate = (id, title) => () => {
// we need the id so expres knows what post to update, and the title being that only editing the title.
if(this.props.myTitle !== null){
const creds = {
id, title
}
this.props.UpdatePost(creds);
}
}
clickLike = (id) => () => {
this.props.postLike(id);
}
render(){
const {title, id, userId, removePost, createdAt, post_content, username, editForm, isEditing, editChange, myTitle, postUpdate, likes} = this.props
return(
<div>
<Typography variant="h6" component="h3">
{/* if else teneray operator */}
{isEditing ? (
<Editable editField={myTitle ? myTitle : title} editChange={editChange}/>
): (
<div>
{title}
</div>
)}
</Typography>
<Typography component="p">
{post_content}
<h5>
by: {username}</h5>
<Typography color="textSecondary">{moment(createdAt).calendar()}</Typography>
<Like like={this.clickLike(id)} postId={id}/>
</Typography>
{!isEditing ? (
<Button variant="outlined" type="submit" onClick={editForm(id)}>
Edit
</Button>
):(
// pass id, and myTitle which as we remember myTitle is the new value when updating the title
<div>
<Button
disabled={myTitle.length <= 3}
variant="outlined"
onClick={this.onUpdate(id, myTitle)}>
Update
</Button>
<Button
variant="outlined"
style={{marginLeft: '0.7%'}}
onClick={editForm(null)}>
Close
</Button>
</div>
)}
{!isEditing amp;amp; (
<Button
style={{marginLeft: '0.7%'}}
variant="outlined"
color="primary"
type="submit"
onClick={removePost(id)}>
Remove
</Button>
)}
</div>
)
}
}
const mapStateToProps = (state) => ({
isEditingId: state.post.isEditingId,
})
const mapDispatchToProps = (dispatch) => ({
// pass creds which can be called anything, but i just call it credentials but it should be called something more
// specific.
UpdatePost: (creds) => dispatch(UpdatePost(creds)),
getLikeCount: (id) => dispatch(getLikeCount(id)),
postLike: (id) => dispatch( postLike(id))
// Pass id to the DeletePost functions.
});
export default connect(null, mapDispatchToProps)(PostItem);
Like.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCoffee, faAdjust } from '@fortawesome/free-solid-svg-icons';
import {connect} from 'react-redux';
import { getLikeCount} from '../actions/';
class Like extends Component{
constructor(props){
super(props);
this.state = {
likes: null
}
}
getLikes = (id) => {
// console.log(id);
this.props.getLikeCount(id)
console.log(this.props.likeCount)
}
render(){
return(
<div style={{float:'right', fontSize: '1.5em', color:'tomato'}} >
<i style={{ marginRight: '140px'}} className="fa fa-heart-o">
<span style={{ marginLeft: '6px'}}>
<a href="#" onClick={this.props.like}>Like </a>
{this.getLikes(this.props.postId)}
</span>
{/* gets the like counts */}
{this.props.likeCount}
</i>
</div>
)
}
}
const mapStateToProps = (state) => ({
isEditingId: state.post.isEditingId,
likeCount:state.post.likes
})
const mapDispatchToProps = (dispatch) => ({
getLikeCount: (id) => dispatch(getLikeCount(id)),
// Pass id to the DeletePost functions.
});
export default connect(mapStateToProps, mapDispatchToProps)(Like);
Ответ №2:
Философия реакции основана на удалении страниц обновления при изменениях. так что забудьте обновить во всех приложениях react.
в компоненте вы можете изменить код следующим образом:
handleAddUpVote = ()=> this.props.dispatch(addUpVote())
return(
<div onClick={this.handleAddUpVote}> sth </div>
)
и в действии:
const ADD_UP_VOTE = "ADD_UP_VOTE";
const addUpVote = ({type: ADD_UP_VOTE});
export {ADD_UP_VOTE, addUpVote}
и, наконец, измените свой редуктор:
initialState={
voteCounter: 0
}
const Reducer = (state=initialState, action) => {
switch(action.type){
case(ADD_UP_VOTE):
return{
...state,
voteCounter: state.voteCounter 1
};
}
}
Комментарии:
1. это немного сбивает с толку, но я буду использовать эту логику в своем решении thx
2. посмотрите видео о реализации redux на YouTube и других ресурсах, чтобы стать мастером redux @MrPatel
3. мастер в redux lol, я заставил его работать с ответом через секунду.
4. Я сделал новое сообщение в своем приложении, и теперь оно действует странно. Он обновляет количество лайков для всех сообщений. Мой код выглядит странно для u или выключен? это похоже на то, что он делает бесконечную публикацию на моем сервере. я думаю, что это как-то связано с
()=> ()5. @MrPatel Я могу догадаться, в чем ваша ошибка, мой пост был примером использования redux в вашем приложении, но вы должны учитывать свои данные. например, ваша структура данных выглядит следующим образом: сообщения: [{id: 1, текст: привет, лайки: 0},{id: 2, текст: мир, лайки: 1}] поэтому вы должны отправить идентификатор сообщения propper в свою функцию reducer, а reducer должен использовать карту длянайдите и обновите сообщение с идентификатором 2. если этого недостаточно, скажите мне опубликовать этот комментарий с дополнительным примером кода.