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 {<pending>} result" . Please specify where is the problem. — Christopher Francisco
– Christopher Francisco, Commented May 11, 2018 at 15:07

Christopher Francisco · Accepted Answer · 2018-05-11 15:19:48Z

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.

Collectives™ on Stack Overflow

Async/await call action from React component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related