在触发动作和返回新状态时延迟,是否有人知道它可能是什么?

时间:2018-02-15 11:01:39

标签: reactjs react-native redux react-redux

我在传达动作方面有一点延迟,当我触发一个动作需要大约2秒才能实际被触发,当它被瞬间触发时,新状态的返回有时需要2秒有时达到8秒,我去举例说明

示例

我有一个帖子列表,有一个喜欢的按钮,当我点击享受按钮它变得有色......完美的工作......但延迟是巨大的......任何人都可以帮忙吗?

此代码是在平面列表或帖子列表中调用的组件...这是喜欢按钮的代码

                <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>   

这是一个操作代码

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);
    }
}

这是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
                   )
                }   

0 个答案:

没有答案