[英]Redux thunk: wait for async function to dispatch
I'm creating a React Native application and using redux and redux-thunk to implement my API requests. 我正在创建一个React Native应用程序并使用redux和redux-thunk来实现我的API请求。 I would like to know how I can wait for my action to be dispatched and make sure that my state has been updated in an async thunk logic.
我想知道如何等待我的行动被派遣,并确保我的状态已经在异步thunk逻辑中更新。 If I understand correctly,
await
will wait for the end of the thunk but the action is not dispatched yet. 如果我理解正确,
await
将等待thunk的结束,但是尚未调度该动作。 Although, as you can see in my usage, I need the state to be modified to proceed the rest of the code accordingly. 虽然,正如您在我的使用中所看到的,我需要修改状态以相应地继续执行其余代码。
actions/user.js 动作/ 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 减速器/ 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 RegisterScreen.js
if (await trySignup(
emailValue,
firstNameValue,
lastNameValue,
passwordValue,
birthdateValue,
genderValue
)
) {
if (userReducer.data) {
navigation.navigate('Secured')
}
In Redux, When an Action is dispatched to the store, it will update the state of the UI automatically with new props. 在Redux中,当Action被调度到商店时,它将使用新的props自动更新UI的状态。
Instead of watching the dispatched action, You can add a flag in the reducer signUpSuccess
similar to isLoggingIn
flag and listen to the changes in componentDidUpdate
lifecycle method. 您可以在reducer
signUpSuccess
添加一个类似于isLoggingIn
标志的标志,而不是观察已调度的操作,并监听componentDidUpdate
生命周期方法中的更改。
trySignup
can be called separately (like on an event, formSubmit, button click, etc.) trySignup
可以单独调用(如在事件,formSubmit,按钮单击等)
RegisterScreen.js 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);
If I understand correctly, await will wait for the end of the thunk but the action is not dispatched yet.
如果我理解正确,await将等待thunk的结束,但是尚未调度该动作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.