如何在React中使用Rxjs返回Promise？

Question

I am learning RxJS/Redux-Observable in React.

But I have a question about return Promise .

Without using RxJS/Redux-Observable

so that I can return promise to component let it can use .then() for next action

In the Action of React

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

In the Component of React

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

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

With using RxJS/Redux-Observable

I don't know how to return promise

In the Epic Action of 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
                    )
                ))
            )
        })
    );
}

In the Component of React

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

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

I know using Reducer is the one of way to handle, but I still want to know how to return promise.

Thanks guys

Answer 1

So you made a classic mistake when we are returning a promise you should not return a new Promise for the success or error but return two function:

resolve -> for the sucess chaining it with then reject -> for the faileure chaining it with catch !

Hope this code will help you, tell me if you need clarification

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