Set loading state before and after an action in a React class component

jsx, reactjs

Solution

Wrap the rest of your code in the callback of the first `setState`:

handleChange(input) {
  this.setState({
    load: true
  }, () => {
    this.props.actions.getItemsFromThirtParty(input)
    this.setState({ load: false })
  })
}

With this, your `load` is guaranteed to be set to `true` before `getItemsFromThirtParty` is called and the `load` is set back to `false`.

This assumes your `getItemsFromThirtParty` function is synchronous. If it isn't, turn it into a promise and then call the final `setState` within a chained `then()` method:

handleChange(input) {
  this.setState({
    load: true
  }, () => {
    this.props.actions.getItemsFromThirtParty(input)
      .then(() => {
        this.setState({ load: false })
      })
  })
}

Problem

I have function which dispatched an action. I would like to display a loader before and after the action. I know that react composing the object passed to `setState`. the question is how can I update the property in async way: ``` handleChange(input) { this.setState({ load: true }) this.props.actions.getItemsFromThirtParty(input) this.setState({ load: false }) } ``` Basically, it all worked great if I put this property as part of the application state (using Redux), but I really prefer to bring this property to the component-state only.

Original source

Related problems