Async/await call action from React component

Question

I have a method lookupComplete in react component that call action checkIfAssign, I need wait to response and depend on this response trigger in this method another methods. But recieve Promise {<pending>} "result". How to wait until resolve this action ?

Component:

export class Test extends Component {
  ....

  lookupComplete = (tagId = this.state.tagId) => 
    this.setState({tagId}, () => {
      let result = this.props
        .checkIfAssign(this.state.tagId, this.props.accessToken)

    result.status 
      ? this.triggerTransition(transitions.ClickCheckTag) 
      : this.triggerTransition(transitions.Test)
    })
}

export const mapDispatchToProps = dispatch => ({
  checkIfAssign: (tagId, accessToken) => 
    dispatch(TagAssignmentActions.checkTagAssignment(tagId, accessToken)),
})

Action:

export const checkTagAssignment = (tagId, token) => async dispatch => {
  dispatch({
    type: TagAssignmentActionTypes.TagAssignmentChanged,
  })

  let status, assignee, response
  try {
    response = await DeviceApi.checkTagAssignment(tagId, token)

    assignee = response.result.assignee
    status = response.result.status
  } catch (e) {
    if (e && e.status === httpStatusCode.notFound)
      status = TagStatus.NotFound
  }

  dispatch({
    type: TagAssignmentActionTypes.TagAssignmentChanged,
    status,
    assignee,
    response,
  })
  console.log(response, 'response')
  return response
}

"I have a method in react component that call action". Please specify the name of the methods, leaving it very explicit. "But recieve Promise {} result" . Please specify where is the problem. — Christopher Francisco, May 11 '18 at 15:07

score 2 · Answer 1 · answered May 11 '18 at 15:19

If you want to await, you should make your function async:

lookupComplete = async (tagId = this.state.tagId) => 
...

  let result = await this.props
    .checkIfAssign(this.state.tagId, this.props.accessToken)

However, this is a bad pattern. The correct one would reading the status from your app state. As you can see, your action will update the app state here:

dispatch({
  type: TagAssignmentActionTypes.TagAssignmentChanged,
  status,
  assignee,
  response,
})

If you're doing redux properly, your Test component is probably connect()ed to redux. In your mapStatesToProps you'd pass the value of status from the app state to the Test component props

const mapStateToProps = state => ({
  status: state.myNamespaceForTaskAssignment.status,
});

Then inside getDerivedStateFromProps(nextProps, prevState) you'd do the check for:

nextProps.status 
  ? this.triggerTransition(transitions.ClickCheckTag) 
  : this.triggerTransition(transitions.Test)

Or something like this.

Async/await call action from React component

1 Answers1