데이터를 Redux에 비동기 적으로로드하는 방법은 무엇입니까?

Question

하나는 다음과 같은 구성 요소 파일 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); 

이 예상대로 작동하도록 나타납니다하지만 하나는 다음과 같은 경고를 가져옵니다

경고 : setState(...) : 기존의 상태 전환하는 동안 업데이트 할 수 없습니다 (render 또는 다른 구성 요소의 생성자). 렌더링 방법은 소품과 국가의 순수한 기능이어야합니다. 생성자 부작용은 반 패턴이지만 componentWillMount으로 이동할 수 있습니다.

그러나, React's component documentation는 하나 (recompose.lifecycle를 통해 기능적 구성 요소와 함께 할 수 있음) componentDidMount 라이프 사이클 이벤트 기간 동안 작업을 파견해야한다고 제안한다. 그러나 componentDidMount 이벤트 처리기에는 소품이 제공되지 않습니다.

"비동기식"으로 Redux에 작업을 디스패치하는 적절한 방법은 무엇입니까?

Answer 1

실제로 솔루션은 고차원 구성 요소 인 recompose.lifecycle을 사용했습니다. 그러나 화살표 기능을 사용하지 않아야합니다. 업데이트 된 enchance 상위 구성 요소는 다음과 같이 구현되어야합니다.

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)); 
      } 
     }, 
    }), 
);