Redux thunk:等待异步函数调度
Posted
技术标签:
【中文标题】Redux thunk:等待异步函数调度【英文标题】:Redux thunk: wait for async function to dispatch 【发布时间】:2019-09-24 16:37:15 【问题描述】:我正在创建一个 React Native 应用程序并使用 redux 和 redux-thunk 来实现我的 API 请求。我想知道如何等待我的操作被分派,并确保我的状态已在异步 thunk 逻辑中更新。如果我理解正确,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')
【问题讨论】:
【参考方案1】:在 Redux 中, 当一个 Action 被派发到 store 时,它会使用新的 props 自动更新 UI 的状态。
您可以在reducer signUpSuccess
中添加一个类似于isLoggingIn
标志的标志,而不是观察调度的动作,并监听componentDidUpdate
生命周期方法的变化。
trySignup
可以单独调用(比如事件、表单提交、按钮点击等)
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);
【讨论】:
【参考方案2】:如果 props 发生任何变化,则可以更新渲染,因此请在渲染方法中提取 props 并根据 props 的变化更新 UX。 我建议使用React native debugger 来检查您的操作 和当前保存的状态。如果我理解正确, await 将等待 thunk 结束 但该操作尚未分派。
【讨论】:
以上是关于Redux thunk:等待异步函数调度的主要内容,如果未能解决你的问题,请参考以下文章