I'm having a little delay in triggering the actions, when triggering an action takes about 2 seconds for it to be activated, and when it is instantly activated, the return of the new state sometimes takes 2 seconds sometimes up to 8 seconds , I'll exemplify PS: the performance of the application is ok, nothing catching or giving qlqr gagging
Example
I have a list of posts and these posts have a button to enjoy, when I click on enjoy ... register on the instant bank ... but the return of the new state talking q was tanned to change the color of the button delay coming ..
This is the code of the component that flatlist renders and has the button
<View style={styles.botEmovere}>
<TouchableOpacity onPress={() => this._like(this.props.index)} style={{flexDirection:'row',alignItems:'center'}}>
<Icon iconStyle={{paddingRight:5,fontWeight:'bold'}} name={this.props.emovere.liked ? 'heart' : 'heart-o'} size={20} type='font-awesome' color='#5A2B5C'/>
<Text style={{fontSize:10,color:'#5A2B5C',fontWeight:'bold'}}>{this.props.emovere.likes}</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => alert('Curtiu'+this.props.index)} style={{flexDirection:'row',alignItems:'center'}}>
<Icon iconStyle={{paddingRight:5,fontWeight:'bold'}} name='comments-o' size={20} type='font-awesome' color='#5A2B5C'/>
<Text style={{fontSize:10,color:'#5A2B5C',fontWeight:'bold'}}>97.191</Text>
</TouchableOpacity>
<View style={{flexDirection:'row',alignItems:'center'}}>
<Icon
name='dots-three-horizontal'
color='#5A2B5C'
iconStyle={{fontSize:25}}
type='entypo'
/>
</View>
This is the action code
export function likeEmovere(emovere,index){
return async (dispatch) => {
try {
const response = await api.post('/api/emovere/like',{
emovere_id:emovere.id
},
{
headers:{
'Accept' : 'application/json',
}
}
);
if(response.data.type == 'LIKE'){
likeEmovere(index,dispatch);
}else{
deslikeEmovere(index,dispatch);
}
}catch(error){
console.log(error);
}
}
and this is my reducer
const INITIAL_STATE = {
emoveres: null,
emovere: '',
modalEmovere: false,
users : null,
loading: false,
successEmovere : false,
};
export default (state = INITIAL_STATE, action) => {
console.log(action);
switch(action.type){
case 'LIST_EMOVERES' :
return { ...state, emoveres : action.emoveres,loading:false}
case 'CHANGE_EMOVERE' :
return { ...state, emovere : action.emovere}
case 'SEND_EMOVERE' :
return { ...state, emovere: emovere}
case 'SEND_EMOVERE_SUCCESS' :
return { ...state, emovere: '',modalEmovere:false,successEmovere:true}
case 'SHOW_MODAL_EMOVERE' :
return { ...state, modalEmovere:true}
case 'LOADING_EMOVERE' :
return { ...state, loading:true}
case 'CLOSE_MODAL_EMOVERE' :
return { ...state, modalEmovere:false}
case 'SEARCH_USER' :
return { ...state, users:action.users}
case 'LIKE_EMOVERE' :
return {
...state,
emoveres: state.emoveres.map(
(emovere, i) => i === action.index ? {...emovere, liked: true,likes: emovere.likes+1} : emovere
)
}