当前位置 : 首页 » 互动问答 » 正文

asynchronos操作完成后才导航到下一页?反应母语

分类 : 互动问答 | 发布时间 : 2018-04-27 16:51:33 | 评论 : 1 | 浏览 : 43 | 喜欢 : 0

所以,作为一名初学者,我还有一些棘手的情况,比如redux以及react-native。

当用户登录时,我想用用户数据更新Redux状态。我在一个网络令牌处称为登录方法。直接之后,我想用redux-thunk调度两个异步操作。问题是:

当这些操作被分派并且我有来自API的响应时,我已经导航到另一个屏幕,并且呈现列表的数据不处于Redux状态。

问题:我怎样才能“持有”程序,直到我的状态被更新,然后导航到下一页?

这是用户登录时发生的情况:

 fetch(“http ://10.0.2.2:8000 / api / api-token-auth /“,{
        方法:“发布”,
        标题:{
          '接受':'application / json',
          'Content-Type':'application / json'
        },
        body:JSON.stringify({
          电子邮件:this.props.email,
          密码:this.props.password,
        })
        })。then((response)=> response.json()
        )。(((jResponse)=> {
          的console.log(jResponse);
          this._onValueChange('token_id',jResponse.token);
          this.props.loginUserSuccess();
          this.props.navigation.navigate( 'MainMenue');
        })。catch((error)=> {
          的console.log(误差);
          this.props.loginUserFail();
          })
    }

在登录期间的某个地方,这两个动作应该完全调度并且应该更新状态:

 export const profileLoad =()=> {

        return(dispatch)=> {
            AsyncStorage.getItem( 'token_id')
            。((token_id)=> fetch(“http://10.0.2.2:8000/api/profile/”,{
                方法:“GET”,
                标题:{
                '授权':'JWT'+ token_id
                }
            })
            。((response)=> response.json())
            。((答案)=> {
                dispatch({type:PROFILE_LOAD,payload:answer});
            })
            .done());
        }
    }

export const productsLoad =()=> {

    return(dispatch)=> {
        AsyncStorage.getItem( 'token_id')
        。((token_id)=> {

            获取(“http://10.0.2.2:8000/api/profile/products/”,{
                方法:“GET”,
                标题:{
                '授权':'JWT'+ token_id
                }
            })。then((anser)=> anser.json())
            。((response)=> {
                调度({类型:PRODUCTS_LOAD,有效载荷:响应})
            })
        }
        ).done();
    }

}

然后,我想导航另一个屏幕,并显示列表(使用ListView)以显示来自产品和配置文件的JSON数据。

- >所以我终于明白了。 Solution 1.)根据陈述返回行动创造者的承诺 2.)确保你在方法

中加入了一个回调函数load const loadAllProfileData =({navigate})=> {
    return(dispatch)=> {
        讯(profileLoad())
        (()=> dispatch(productsLoad()))
        。(()=> navigate('MainMenue'))
    };
}

export const profileLoad =()=> {

            return(dispatch)=> {
                返回AsyncStorage.getItem('token_id')
                。((token_id)=> fetch(“http://10.0.2.2:8000/api/profile/”,{
                    方法:“GET”,
                    标题:{
                    '授权':'JWT'+ token_id
                    }
                })
                ).then((response)=> response.json())
                。((答案)=> {
                    dispatch({type:PROFILE_LOAD,payload:answer});
                })

            }
        }


export const productsLoad =()=> {

     return(dispatch)=> {
         返回AsyncStorage.getItem('token_id')
         。((token_id)=>)
             获取(“http://10.0.2.2:8000/api/profile/products/”,{
                 方法:“GET”,
                 标题:{
                 '授权':'JWT'+ token_id
                 }
            })
        )。((答案)=> answer.json())
        。((response)=> {
                调度({类型:PRODUCTS_LOAD,有效载荷:响应})
            })

     }
}

回答(1)

  • 1楼
  • 您可以返回您的动作创作者和chain them with then的承诺。您只需将 return AsyncStorage.getItem()... 添加到您的动作创作者即可。然后你可以这样做:

     fetch(url)// login
      。然后(讯(profileLoad))
      。然后(讯(productsLoad))
      。然后(this.props.navigation.navigate( 'MainMenue'))
      .catch(err => //处理错误)
    

    阅读更多关于 promises chaining .

    编辑:一个简单的例子是:

    从'redux'导入{createStore,applyMiddleware}
    从'redux-thunk'导入thunkMiddleware
    从'node-fetch'导入提取;
    
    const ROOT_URL ='https://jsonplaceholder.typicode.com';
    
    const FETCH_DATA ='FETCH_DATA';
    
    const url =`$ {ROOT_URL} / users`;
    
    函数fetchData(){
        return(dispatch)=> {
            返回抓取(url)
                .then(res => res.json())
                。然后(数据=> {
                    调度({
                        键入:FETCH_DATA,
                        有效载荷:数据[0] .name
                    });
                })
        }
    }
    
    函数reducer(state = [],action){
        if(action.type === FETCH_DATA){
            console.log('Action.payload:',action.payload);
        }
    
        开关(action.type){
            case'FETCH_DATA':
                return [... state,action.payload];
    
            默认:
                返回状态;
        };
    }
    
    让store = createStore(
        减速器,
        applyMiddleware(thunkMiddleware)
    )
    
    store.subscribe(()=>
        console.log('Store State:',store.getState())
    )
    
    取(URL)
        .then(res => res.json())
        那么(数据=>数据)
        。然后(store.dispatch(fetchData()))
        。然后(store.dispatch(fetchData()))

相关阅读: