Comment charger des données dans Redux de manière asynchrone?

Question

Supposons que l'on a le fichier composant suivant HelloForm.jsx:

import React from 'react'; 
import {graphql} from 'react-apollo'; 
import {connect} from 'react-redux'; 
import {actions, Control, Form} from 'react-redux-form'; 
import {compose, withProps} from 'recompose'; 

import query from './HelloForm.gql'; 

const passThrough = fn => BaseComponent => props => { 
    fn(props, BaseComponent); 

    return BaseComponent(props); 
}; 

export const HelloForm = ({onSubmitEventHandler}) => 
    <Form 
      className="my-form" 
      model="forms.hello" 
      onSubmit={onSubmitEventHandler} 
    > 
     <label htmlFor="name">Name</label> 
     <Control.text 
      {...props} 
      model=".name" 
      id="name" 
     /> 

     <button type="submit">Say Hello</button> 
    </Form>; 

export const enhance = compose(
    connect(), 
    withProps({ 
     onSubmitEventHandler: ({name}) => { 
      window.alert(`Hello, ${name}`); 
     }, 
    }), 
    graphql(query), 
    passThrough(({data, dispatch, loading}) => { 
     if (!loading) { 
      dispatch(actions.load('forms.hello', data)); 
     } 
    }), 
); 

export default enhance(HelloForm); 

Cela semble fonctionner comme prévu, mais on obtient l'avertissement suivant:

Attention: setState(...): Impossible de mettre à jour au cours d'une transition d'état existant (tel que render ou le constructeur d'un autre composant). Les méthodes de rendu doivent être une fonction pure des accessoires et de l'état; Les effets secondaires du constructeur sont un anti-pattern, mais peuvent être déplacés vers componentWillMount.

Cependant, React's component documentation suggère que l'on devrait envoyer l'action lors de l'événement du cycle de vie componentDidMount (qui peut être fait avec des composants fonctionnels via recompose.lifecycle). Mais aucun accessoire n'est fourni au gestionnaire d'événements componentDidMount.

Quelle est la bonne façon de répartir "asynchroniquement" les actions sur Redux?

Answer 1

La solution était en effet d'utiliser le composant d'ordre supérieur recompose.lifecycle. Cependant, il ne faut pas utiliser une fonction fléchée. La mise à jour enchance composant ordre supérieur ne doit être mis en œuvre comme suit:

export const enhance = compose(
    connect(), 
    withProps({ 
     onSubmitEventHandler: ({name}) => { 
      window.alert(`Hello, ${name}`); 
     }, 
    }), 
    graphql(query), 
    lifecycle({ 
     componentDidMount: function() { 
      const {dispatch, loading, recipe} = this.props; 

      if (loading) { 
       dispatch(actions.load('forms.hello', data)); 
      } 
     }, 
    }), 
);