redux - 无法正确处理来自 rxjs 的 ajax 错误

Question

我在 React Redux 中编写应用程序，并且有一个情况，当调用特定操作并将 'text/html' 类型的响应写入状态时，我必须向某些资源发送请求。此资源可以返回状态 200 或 404，并且我无法为响应 404 的情况编写正确的测试。为了运行测试，我使用 jest 库。

Action.js:

export const actions = {
    GET_RESOURCE_SUCCESS: 'GET_RESOURCE_SUCCESS',
    GET_RESOURCE_FAILURE: 'GET_RESOURCE_FAILURE'
};

export const getResourceSuccess = (response) => ({
    type: actions.GET_RESOURCE_SUCCESS,
    payload: response
});

export const getResourceFailure = () => ({
    type: actions.GET_RESOURCE_FAILURE
});

Reducer.js:

import { handleActions } from 'redux-actions';
import { actions } from './Action';

const initialState = {
    content: ''
};

export const getResourceReducer = handleActions(
    {
        [actions.GET_RESOURCE_SUCCESS]: (state, action) => ({ ...state, content: action.payload })
    },
    {
        [actions.GET_RESOURCE_FAILURE]: () => ({ initialState })
    },
    initialState
);

简而言之:当资源返回状态 200 并且内容存在时，我想覆盖 initialState 中的 content 并在资源返回时调用操作 GET_RESOURCE_SUCCESS状态 404 且内容不存在我不想覆盖内容并调用操作GET_RESOURCE_FAILURE。

GetResourceEpic.js:

import { ajax } from 'rxjs/observable/dom/ajax';
import { combineEpics } from 'redux-observable';
import { Observable } from 'rxjs';
import { getResourceSuccess, getResourceFailure } from '../Action';

const specificActionTypes = [
    'SPECIFIC_ACTION_ONE',
    'SPECIFIC_ACTION_TWO'
];

const getResource = () => ajax({
    method: 'GET',
    url: 'http://example.com',
    headers: {
        Accept: 'text/html'
    },
    crossDomain: true,
    responseType: 'text/html'
});

const getResourceEpic = (action$, store) => action$
    .filter(action => specificActionTypes.includes(action.type))
    .flatMap(() => getResource()
        // when response has status 200 and field response call getResourceSuccess
        .map(({ response }) => getResourceSuccess(response))
        // when response has status 404 and doesn't have field response call getResourceFailure
        .catch(() => {
            // helper statement to show in browser that the .catch() was called
            console.log('Error');
            return getResourceFailure();
        })
    );

export default combineEpics(
    getResourceEpic
);

它通常可以工作，但我收到两个错误:

第一:

Uncaught TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
    at Object.subscribeToResult (subscribeToResult.js:73)
    at CatchSubscriber../node_modules/rxjs/operator/catch.js.CatchSubscriber.error (catch.js:111)
    at MapSubscriber../node_modules/rxjs/Subscriber.js.Subscriber._error (Subscriber.js:128)
    at MapSubscriber../node_modules/rxjs/Subscriber.js.Subscriber.error (Subscriber.js:102)
    at AjaxSubscriber../node_modules/rxjs/Subscriber.js.Subscriber._error (Subscriber.js:128)
    at AjaxSubscriber../node_modules/rxjs/Subscriber.js.Subscriber.error (Subscriber.js:102)
    at XMLHttpRequest.xhrReadyStateChange (AjaxObservable.js:327)
    at XMLHttpRequest.d (raven.js:363)

第二个:

Could not consume error: TypeError: Cannot read property 'length' of null
    at getLinesAround (http://localhost:3000/static/js/bundle.js:47197:74)
    at http://localhost:3000/static/js/bundle.js:47537:402
    at Array.map (native)
    at _callee2$ (http://localhost:3000/static/js/bundle.js:47517:54)
    at tryCatch (http://localhost:3000/static/js/bundle.js:58220:40)
    at Generator.invoke [as _invoke] (http://localhost:3000/static/js/bundle.js:58458:22)
    at Generator.prototype.(anonymous function) [as next] (http://localhost:3000/static/js/bundle.js:58272:21)
    at step (http://localhost:3000/static/js/bundle.js:47553:191)
    at http://localhost:3000/static/js/bundle.js:47553:361
raven.js:51 

上述问题不允许我编写测试，因为只有状态为 200 的响应才能通过测试，其他会抛出错误。

it('should dispatch GET_RESOURCE_SUCCESS when SPECIFIC_ACTION_ONE was dispatched', async () => {
        store = mockStore();

        const response = 'some content';
        nock('http://example.com')
            .get('/')
            .reply(200, response);

        const payload = { type: 'SPECIFIC_ACTION_ONE' };
        // specificActionOne() produces and action of type 'SPECFIC_ACTION_ONE'
        const action$ = ActionsObservable.of(specificActionOne(payload));
        const resultAction = await getResourceEpic(action$, store).toPromise();

        expect(resultAction)
            .toEqual(getResourceSuccess(response));
    });

上面的测试通过了，但是状态等于 404 的情况没有通过:

it('should dispatch GET_RESOURCE_FAILURE when SPECIFIC_ACTION_ONE was dispatched', async () => {
            store = mockStore();
            nock('http://example.com')
                .get('/')
                .reply(404);

            const payload = { type: 'SPECIFIC_ACTION_ONE' };
            const action$ = ActionsObservable.of(specificActionOne(payload));
            const resultAction = await getResourceEpic(action$, store).toPromise();

            expect(resultAction)
                .toEqual(getResourceFailure());
        });

上面的测试没有通过，我得到了结果:

TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.

      at Object.subscribeToResult (node_modules/rxjs/util/subscribeToResult.js:73:27)
      at CatchSubscriber.Object.<anonymous>.CatchSubscriber.error (node_modules/rxjs/operator/catch.js:111:42)
      at MapSubscriber.Object.<anonymous>.Subscriber._error (node_modules/rxjs/Subscriber.js:128:26)
      at MapSubscriber.Object.<anonymous>.Subscriber.error (node_modules/rxjs/Subscriber.js:102:18)
      at AjaxSubscriber.Object.<anonymous>.Subscriber._error (node_modules/rxjs/Subscriber.js:128:26)
      at AjaxSubscriber.Object.<anonymous>.Subscriber.error (node_modules/rxjs/Subscriber.js:102:18)
      at XMLHttpRequest.xhrReadyStateChange [as onreadystatechange] (node_modules/rxjs/observable/dom/AjaxObservable.js:327:32)
      at XMLHttpRequest.callback.(anonymous function) (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:289:32)
      at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:219:27)
      at invokeInlineListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:166:7)
      at EventTargetImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:122:7)
      at EventTargetImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:87:17)
      at XMLHttpRequest.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:61:35)
      at readyStateChange (node_modules/jsdom/lib/jsdom/living/xmlhttprequest.js:829:9)
      at Request.properties.client.on (node_modules/jsdom/lib/jsdom/living/xmlhttprequest.js:947:7)
      at Request.emit (events.js:132:15)
      at IncomingMessage.<anonymous> (node_modules/request/request.js:1085:12)
      at Object.onceWrapper (events.js:219:13)
      at IncomingMessage.emit (events.js:132:15)
      at endReadableNT (_stream_readable.js:1101:12)
      at process._tickCallback (internal/process/next_tick.js:114:19)

Answer 1

传递给catch的函数必须返回一个可观察值。您正在返回一个操作。

相反，你应该这样做:

import { of } from 'rxjs/observable/of';
...
.catch(() => {
  console.log('Error');
  return of(getResourceFailure());
})