React Redux : 구성 요소로 데이터를 반환합니다.

Question

항목을 추가 할 양식이있는 구성 요소가 있습니다. 양식이이 같은 REDUX, 뭔가를 사용하여 비동기 작업을 파견하고있어 제출되면 :

_onSubmit(event) { 
    const { dispatch } = this.props; 
    const { data } = this.state; 
    event.preventDefault(); 

    dispatch(addItem(data)); 
    } 

지금, 내 백엔드 내가 진행 상황을 추적 할 수있는 ID로 작업을 만듭니다. 보통이 주어진 작업은 완료하는 데 시간이 걸릴 것이므로 알림 바를 보여주고 싶습니다.

해당 작업을 추적하려면 진행중인이 주어진 작업에 대한 작업 ID를 검색해야합니다. 그래서 다음과 같이 뭔가를 디스패처에서이 정보를 얻을 수 있도록 나는 콜백 함수를 추가하는 방법에 대한 생각 :

_onSubmit(event) { 
     const { dispatch } = this.props; 
     const { data } = this.state; 
     event.preventDefault(); 

     dispatch(addItem(data, (id) => console.log(id))); 
     } 

을하지만 계속 양방향 데이터 통신이 있으므로이 "해키"의 종류를 느낀다.

질문 : 이것을 달성하는 방법은 무엇입니까?

Answer 1

이 문제에 대해 동일한 결과를 얻는 방법은 여러 가지가있을 수 있습니다.

작업 작성자가 여러 작업을 수행 할 수 있도록 Redux Thunk (미들웨어)을 사용합니다. (썽크 당신은뿐만 아니라 그렇게 할 수로) 약속을 사용, 액션 작성자에서

_onSubmit(event) { 
const { dispatch } = this.props; 
const { data } = this.state; 
event.preventDefault(); 

dispatch(addItemActionCreator(data)); 
} 

:

export const addItemActionCreator = (data) => (dispatch) => { 
Promise.get('data').then((data) => { 
    dispatch({ type: STORE_DATA_ID, id: data.id }) 
}) 
} 

이 파견

그럼 당신은 이런 식으로 뭔가를 작성해야 당신의 상태에서 ID를 저장할 행동.

구성 요소에 connect을 사용하여 id을 구독하면 구성 요소의 최신 값은 항상 id입니다.

희망이 도움이됩니다.

Answer 2

이렇게하려면 몇 가지 방법이 있습니다. 나는 redux-saga과 eventChannels을 사용하여 매우 비슷한 것을했습니다.

같은 목적으로 redux-cycles 또는 redux-observable을 사용할 수도 있습니다. 즉, API의 신호에 가입 한 관찰 가능 목록을 생성하고 해당 액션을 발송합니다.

나는 redux-thunk의 팬이 아닙니다. 어쩌면 redux-thunk를 사용하여이를 수행 할 수있는 방법이있을 수 있지만, 쉽지는 않지만 우아하지 않을 수도 있습니다.