À l'aide de async setState

J'ai une fonction qui a envoyé une action. Je voudrais afficher un loader avant et après l'action. Je sais que réagir de la composition de l'objet passé en setState. la question est de savoir comment puis-je mettre à jour la propriété de façon asynchrone:

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

Fondamentalement, tout a très bien fonctionné si j'ai mis cette propriété dans le cadre de l'état de l'application (à l'aide de Redux), mais je préfère vraiment mettre cette propriété à la gestion des composants de l'état seulement.

  • Comment à ce sujet.accessoires de jeu.dispatch(getItemsFromThirtParty()).puis(/* ce */) sur le composant de niveau? Je veux dire, en tant qu'auteur de redux écrit ici - stackoverflow.com/a/33168143/6538824 avez-vous vraiment besoin d'un redux-il?
  • Alors, comment envisagez-vous de rendre à nouveau le composant lors de la fin de l'action?
  • Giorgi, c'est exactement le point. Je ne veux pas utiliser redux pour le "loader" de l'état. Bien sûr, j'ai besoin de redux pour l'état de l'application (DONNÉES réelles). Le chargeur appartient à la seule composante, et il ne devrait pas être un pert des données de l'application. Je souhaite juste pour l'afficher quand je suis aller chercher les données, et de le cacher après je reçois la réponse.
InformationsquelleAutor Chen | 2017-04-12
  1. 23

    Envelopper le reste de votre code dans le rappel de la première setState:

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

    Avec cela, votre load est garanti d'être mis à true avant getItemsFromThirtParty est appelée et le load est à false.

    Cela suppose que votre getItemsFromThirtParty fonction est synchrone. Si elle n'est pas, la transformer en une promesse et ensuite appeler la finale setState dans un enchaînés then() méthode:

    handleChange(input) {
  this.setState({
    load: true
  }, () => {
    this.props.actions.getItemsFromThirtParty(input)
      .then(() => {
        this.setState({ load: false })
      })
  })
}
    • l'exportation d'une fonction retourne une fonction qui accepte un envoi, de retour de la Promesse qui a résolu dans setState.. a Travaillé comme de la magie! Merci James!
    • N'oubliez pas de charge définie à false dans un bloc catch, dans le cas où la Promesse est rejeté.
    InformationsquelleAutor James Donnelly
  2. 45

    vous pouvez envelopper le setState en une Promesse et l'utilisation async/await comme ci-dessous

    setStateAsync(state) {
    return new Promise((resolve) => {
      this.setState(state, resolve)
    });
}

async handleChange(input) {
    await this.setStateAsync({ load: true });
    this.props.actions.getItemsFromThirtParty(input);
    await this.setStateAsync({ load: false })
}

    Source: ASYNC ATTENDENT À RÉAGIR

    • J'ai pris une étape supplémentaire et n'a const asyncSetState = instance => newState => new Promise(resolve => instance.setState(newState, resolve)); que vous pouvez utiliser dans un composant comme si ... await asyncSetState(this)({ mystuff: false });
    InformationsquelleAutor Tejas Rao
  3. 1

    Voici ce que vous pouvez faire...

    1. Changer votre action à prendre dans un onFetchComplete de rappel, avec le input.

    2. Changer votre handleChange à

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

    Cela permettra d'assurer l'action processeur code peut invoquer de nouveau votre état de changement de rappel, même si elle n'est pas écrite dans une promesse de mode.

    • Intéressant. Mais en Fait préférer la promesse de la mode. merci pour le conseille
    • Oui Promesse fonctionne mieux. Dans certains scénarios, comme le Reflux, il n'est pas facilement possible de retourner des résultats des actions, de sorte que vous ne pouvez pas utiliser promet-il. Aussi, vous devez penser à les attraper, sinon vous risquez de manquer le spinner pour toujours :). Avoir certaines actions de retour non-promesse et les autres promesse est aussi quelque chose qui doit être clairement identifié, dire par leurs noms.
    • La capture des erreurs - ne jamais être oubliée. Et je ne pouvais pas être plus d'accord sur le choix des noms!
    InformationsquelleAutor hazardous
  4. 0

    Une petite mise à jour à l'aide de promesses pour l'action créateurs et async/await fonctionne très bien, et ça rend le code plus propre, par rapport à la "puis" chaînage:

    (async () => {
   try {
    await this.props.actions.async1(this.state.data1);
    await this.props.actions.async2(this.state.data2) 
    this.setState({ load: false );
   } catch (e) {
    this.setState({load: false, notify: "error"});
   }
})();

    Bien sûr, c'est une question de goût.

    EDIT : Ajout du support manquant

    • Déplacer this.setState({ load: false ); dans finallysi vous n'avez pas besoin de notifier une erreur, votre code sera plus succincte ;).
    InformationsquelleAutor Chen