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】:

如果我理解正确, await 将等待 thunk 结束 但该操作尚未分派。

如果 props 发生任何变化,则可以更新渲染,因此请在渲染方法中提取 props 并根据 props 的变化更新 UX。 我建议使用React native debugger 来检查您的操作 和当前保存的状态。

【讨论】:

以上是关于Redux thunk:等待异步函数调度的主要内容,如果未能解决你的问题,请参考以下文章

在redux和redux thunk中使用异步调度传递参数

Redux 等待异步 thunk 继续进行

Redux等待异步thunk继续前进

Redux thunk - 错误 · 动作必须是普通对象。使用自定义中间件进行异步操作,即使调度具有键类型的对象

Redux thunk - 嵌套调度的函数/动作

使用 typescript 将异步操作发送到 redux 调度