React native 作为Toast处理Redux API调用中的错误

因此，我试图找出当从redux发出API调用时显示

Toast

错误和成功函数的最佳方法

我的思路是：为API调用创建操作。如果成功，那么我希望屏幕切换到主屏幕。如果失败，则在

Toast

中显示消息

以下是我的一些行为：

导出函数getTokenAPI（用户名、密码）{
返回异步函数操作（分派）{
试一试{
分派（{type:t.AUTH\u GET\u TOKEN}）；
调度（设置加载（真））；
const{data}=await API.authGetToken（用户名、密码）；
const{success}=数据；
如果（成功）{
const{access_token，refresh_token}=data；
调度（setAccessToken（访问令牌））；
调度（设置刷新令牌（刷新令牌））；
等待调度（设置加载（假））；
}否则，如果（！成功）{
const{errorMessage}=数据；
抛出错误（errorMessage）；
}
}捕获（e）{
调度（设置错误（e.message））；
调度（设置加载（假））；
}
};
}

setError

操作将

error

键设置为

true

，并设置

errorMessage

。我的屏幕是这样的：

从“React”导入React；
从'native base'导入{Container，View，Toast}；
从“./styles”导入样式；
从'react redux'导入{connect}；
从“_/auth”导入{authActions}”；
const LoginScreen=props=>{
const{getToken，navigation}=props；
const{navigate}=导航；
const navigateToHome=（）=>navigate（'Home'）；
const handleLogin=async（）=>{
const{error，errorMessage}=props；
等待getToken（'sample'，'pass123'）；
如果（错误）{
吐司，表演({
文本：错误消息，
按钮文字：“凯”，
});
}否则{
导航回家（）；
}
};
返回(
);
};
const mapDispatchToProps=调度=>({
getToken:（）=>dispatch（authoctions.getTokenAPI（）），
});
常量mapStateToProps=状态=>({
isLoading:state.authReducer.isLoading，
错误：state.authReducer.error，
errorMessage:state.authReducer.errorMessage，
});
导出默认连接(
MapStateTops，
mapDispatchToProps，
)（登录屏幕）；

因此，如果出现错误，则显示toast。如果成功，请导航到主屏幕。基本上，

error

不会

true

足够快，无法在

handleLogin

中进行适当的检查

---

对模式或流程有何建议？我应该在这里使用

useffect

hook吗？

您可能会认为，显示吐司是redux操作的副作用，与您显示的React组件没有实际关系。navigateHome（）所做的一切都可以通过react router的push函数完成，该函数在redux操作中调用——如果您使用的是react router。然后LoginScreen需要做的就是在mount上调用getToken。这可以通过无依赖项的useEffect或使用类组件和componentDidMount来完成。我之所以这样建议是因为handleLogin看起来有点笨重，它复制了thunk redux操作的控制流，这不是一个好迹象。谢谢@timotgl！我对副作用的概念不太熟悉，所以你让我找到了正确的解决方案。你可以说，展示烤面包片是redux操作的副作用，与你展示的React组件无关。navigateHome（）所做的一切都可以通过react router的push函数完成，该函数在redux操作中调用——如果您使用的是react router。然后LoginScreen需要做的就是在mount上调用getToken。这可以通过无依赖项的useEffect或使用类组件和componentDidMount来完成。我之所以这样建议是因为handleLogin看起来有点笨重，它复制了thunk redux操作的控制流，这不是一个好迹象。谢谢@timotgl！我对副作用的概念不太熟悉，所以你让我找到了正确的解决方法。