Slow action firing and delayed new state return ...?

0

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
                   )
                }   
    
asked by anonymous 15.02.2018 / 16:56

0 answers