This question already has answers here:
How do I return the response from an asynchronous call?
                            
                                (38个答案)
                            
                    
                2个月前关闭。
        

    

function reducer(state = initialState, action) {
    //const [success,setSuccess] = useState(false)  :This is giving me an error:
    let success = false; //want to access this variable
    if (action.type === LOG_USER) {
        fire.auth().signInWithEmailAndPassword(action.payload.username, action.payload.pass).then((res) => {
            console.log("entered") //this output is showing in the console
            success=true //from this line
        }).catch((e) => {

        })
    }
    if(success){
      //do something.....
    }


我想从定义的箭头功能中访问成功变量。我怎样才能做到这一点?

编辑:
在达成if陈述时,成功的价值没有改变。但是流程是在箭头功能内进行的

最佳答案

这里的问题不是变量没有更新,而是在您期望变量更新之后就更新了。发生这种情况是因为fire.auth().signInWithEmailAndPassword(action.payload.username, action.payload.pass)返回一个promise,因此异步工作。

您可以通过两种主要方法解决问题:

异步/等待

要解决此问题,您可以利用新的async / await语法来处理异步代码(检查浏览器支持here)。看起来像这样:

// ...
if (action.type === LOG_USER) {
    const res = await fire.auth().signInWithEmailAndPassword(action.payload.username, action.payload.pass);
    console.log("entered"); //this output is showing in the console
    success = true; //from this line
}
// ...


移动成功处理程序

另一种受到更广泛支持的方法是将成功处理程序移入promise回调,如下所示:

// let success = false; // This is no longer needed
if (action.type === LOG_USER) {
    fire.auth().signInWithEmailAndPassword(action.payload.username, action.payload.pass).then((res) => {
        console.log("entered") //this output is showing in the console
        // Handle success here
    }).catch((e) => {
    })
}


话虽如此,您不应该分派来自减速器的请求。正如您可以阅读here(本文讨论redux-reducers的同时,useReducer-reducers的情况一样),reducer应该是纯函数,这意味着它可以将某些输入转换为某些输出,而没有任何副作用。这意味着,在给定相同的先前状态和相同操作的情况下,reducer函数应始终返回相同结果。

因此,您应该先登录用户,然后再分派包含已登录用户信息的操作,而不是监听LOG_USER操作。

10-07 19:56
查看更多