Как вернуть Promise с помощью Rxjs в React?

Я изучаю RxJS/Redux-Observable в React.

Но у меня есть вопрос о return Promise.

Без использования RxJS/Redux-Observable

чтобы я мог вернуть обещание компоненту, пусть он может использовать .then() для следующего действия

В действии React

export const getData = () => (dispatch) => {
    try {
        const dataResponse = await dataAPI.getData();
        dispatch(getDataAction(dataResponse));
        return Promise.resolve(dataResponse);
    } catch (error) {
        return Promise.reject(error);
    }
}

В компоненте реакции

componentDidMount = () => {
    const {
        getData
    } = this.props;

    getData().then(function(response) {
        // I can use this response action for some UX Action.
    })
}

С использованием RxJS/Redux-Observable

Я не знаю, как вернуть обещание

В эпическом действии React

export const getDataEpic = (action$, state$) => {
    return action$.pipe(
        ofType(FETCH_DATA),
        mergeMap(action => {
            let _response = ajax.getJSON(dataAPI.getData());
            return _response.pipe(
                delay(3000),
                map(response => {
                    return fetchDataFulfilledAction(response);
                }),
                takeUntil(action$.pipe(
                    filter(
                        action => action.type === CANCEL_FETCH_DATA
                    )
                ))
            )
        })
    );
}

В компоненте реакции

componentDidMount = () => {
    const {
        getData
    } = this.props;

    getData().then(function(response) {
        // How to get this response result ?
    })
}

Я знаю, что использование Reducer — это один из способов справиться, но я все еще хочу знать, как вернуть обещание.

Спасибо ребята


reactjs javascript rxjs redux-observable
person tommychoo    schedule 20.06.2019    source источник
comment
Вы можете использовать toPromise(), чтобы превратить Observable в Promise   -  person martin    schedule 20.06.2019
comment
@Martin Привет, я не могу найти toPromise() в официальном использовании документа rxjs? Не могли бы вы предоставить больше ссылок на использование или пример кода? большое спасибо   -  person tommychoo    schedule 20.06.2019
comment
Боюсь, примеров нет, но это метод класса Obseravable rxjs.dev/api /index/class/Observable#toPromise   -  person martin    schedule 20.06.2019

Ответы (1)


arrow_upward
0
arrow_downward

Таким образом, вы сделали классическую ошибку, когда мы возвращаем обещание, вы не должны возвращать новое обещание в случае успеха или ошибки, а должны возвращать две функции:

разрешить -> для успешной цепочки с затем отклонить -> для неудачной цепочки с catch !

Надеюсь, этот код поможет вам, скажите мне, если вам нужно разъяснение

export const getData = () => (dispatch) => new Promise((resolve, reject) => {
    const dataResponse = await dataAPI.getData();
    dispatch(getDataAction(dataResponse))

    if(dataResponse.status === '200') {
      return resolve(dataResponse) }
    else {
     return reject(dataResponse.error)
  }   
})
person Aymeric Henry    schedule 20.06.2019