Redux :等待异步函数的分派
Redux :等待异步函数的分派
提问于 2019-05-06 20:06:31
我正在创建一个React本地应用程序，并使用redux和redux-thunk来实现我的API请求。我想知道如何等待我的操作被分派，并确保我的状态已经在异步逻辑中被更新。如果我理解正确的话，await将等待thunk的结束，但是该操作还没有被分派。虽然，正如您在我的用法中所看到的，我需要修改状态以相应地处理其余的代码。
actions/user.js
export const tryLogin = (
email: string,
password: string,
sessionToken: string = ''
): Function => async (dispatch: Function) => {
const logUser = () => ({ type: LOG_USER })
const logUserSuccess = (data: any, infos: any) => ({
type: LOG_USER_SUCCESS,
data,
infos,
})
const logUserError = (signinErrorMsg: string) => ({
type: LOG_USER_ERROR,
signinErrorMsg,
})
dispatch(logUser())
try {
{ /* Some API requests via axios */ }
dispatch(logUserSuccess(responseJson, infos))
return true
} catch (error) {
{ /* Error handling code */ }
dispatch(logUserError(error.response.data.error))
return false
}reducers/user.js
case LOG_USER:
return {
...state,
isLoggingIn: true,
}
case LOG_USER_SUCCESS:
return {
...state,
isLoggingIn: false,
data: action.data,
infos: action.infos,
error: false,
signinErrorMsg: '',
}
case LOG_USER_ERROR:
return {
...state,
isLoggingIn: false,
error: true,
signinErrorMsg: action.signinErrorMsg,
}RegisterScreen.js
if (await trySignup(
emailValue,
firstNameValue,
lastNameValue,
passwordValue,
birthdateValue,
genderValue
)
) {
if (userReducer.data) {
navigation.navigate('Secured')
}回答 2
Stack Overflow用户
回答已采纳
发布于 2019-05-06 20:36:53
在Redux中，当一个Action被分派到商店时，它将用新的道具自动更新UI的状态。
您可以在还原器signUpSuccess中添加一个类似于isLoggingIn标志的标志，并侦听componentDidUpdate生命周期方法中的更改，而不是观看分派的操作。
可以单独调用trySignup (如事件、formSubmit、按钮单击等)。
RegisterScreen.js
class RegisterScreen extends React.Component{
...
componentDidUpdate(prevProps) {
if (prevProps.signUpSuccess !== this.props.signUpSuccess){
if (this.props.signUpSuccess) {
navigation.navigate('Secured')
}
}
}
...
}
const mapStateToProps = (state) => ({
signUpSuccess: state.userReducer.signUpSuccess,
});
export default connect(mapStateToProps)(RegisterScreen);Stack Overflow用户
发布于 2019-05-06 21:05:23
如果我正确理解，等待将等待结束的雷击，但行动还没有发出。
- 如果道具中发生任何更改，则可以更新呈现，因此在呈现方法中提取道具，并根据道具中的更改更新UX。
- 我建议使用反应本机调试器检查您的操作和当前保存的状态。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56015417
复制相关文章
相似问题
使用PHP switch语句执行多个case
Ruby case switch语句，执行每个case
使用多个case的多个Switch语句？
case/switch语句
java switch case语句会对负的int值执行多个case吗？
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
