如何在此处访问外部作用域变量

Question

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语句时，成功的价值没有变化。但气流正在进入箭头功能

Answer 1

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

您可以通过两种主要方式解决问题：

异步/等待

为了解决这个问题，您可以利用新的async/await语法来处理异步代码(请在此处查看浏览器支持(。这看起来像这样：

// ...
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) => {
})
}

话虽如此，您不应该发送来自减速器的请求。正如您在这里所读到的(虽然本文讨论的是redux reducers，但useReducer reducers也是如此(，reducer应该是纯函数，这意味着它将一些输入转换为一些输出，而没有任何副作用。这意味着，给定相同的先前状态和相同的操作，reducer函数应该始终返回相同的结果。

因此，与其监听LOG_USER操作，不如先让用户登录，然后分派一个包含已登录用户信息的操作。