redux-saga: Действия должны быть простыми объектами

Question

У меня проблема с сагой, и я понятия не имею, что не так.Я получаю сообщение об ошибке, как действия должны быть простые объекты.Используйте пользовательское промежуточное программное обеспечение для асинхронных действий при использовании реагирования на избыточность.Вот мой код.

container / index.js

class AppContainer extends Component {

    componentDidMount() {
        const { actions: { onFetchPhoto } } = this.props;
        onFetchPhoto();
    }

    render() {
        return (
            <App />
        );
    }
}


const mapDispatchToProps = (dispatch) => ({
    actions: {
        onFetchPhoto: () => dispatch(fetchPhoto())
    }
})


export default connect(null, mapDispatchToProps)(AppContainer);

actions / index.js

export const FETCH_PHOTO_REQUEST = "FETCH_PHOTO_REQUEST";
export const FETCH_PHOTO_SUCCESS = "FETCH_PHOTO_SUCCESS";
export const FETCH_PHOTO_FAILURE = "FETCH_PHOTO_FAILURE";

export function fetchPhoto(payload) {
    return {
        type: FETCH_PHOTO_REQUEST
    }
}
export function fetchPhotoSuccess(payload) {
    return {
        type: FETCH_PHOTO_SUCCESS,
        payload
    }
}
export function fetchPhotoFailure(error) {
    return {
        type: FETCH_PHOTO_SUCCESS,
        payload: {
            error
        }
    }
}

sagas / index.js

function* fetchRandomPhoto() {
    //yield put(fetchPhoto());

    const {
        response,
        error
    } = yield call(fetchRandomPhotoApi)

    if (response) {
        yield put(fetchPhotoSuccess(response))
    } else {
        yield put(fetchPhotoFailure(error))
    }
}

function* watchLoadRandomPhoto() {
    try {
        while (true) {
            yield takeLatest(FETCH_PHOTO_REQUEST, fetchRandomPhoto);
        }
    }
    catch(error) {
        console.error("error in saga", error)
    }
}

export default function* rootSaga() {
    yield fork(watchLoadRandomPhoto)
}

services / index.js

import axios from 'axios';
import {
    URL,
    PUBLIC_KEY
} from 'src/constants/config';

import {
    schema,
    normalize
} from 'normalizr'

export function fetchRandomPhotoApi() {
    return axios({
            url: `${URL}/photos/random`,
            timeout: 10000,
            method: 'get',
            headers: {
                'Autorization': `Client-ID ${PUBLIC_KEY}`
            },
            responseType: 'json'
        })
        .then((response) => {
            const { data } = response.data;
            console.log("d");
            if (data) {
                return ({
                    response: {
                        id: data.id,
                        url: data.urls.full,
                        title: data.location.title
                    }
                })
            }
        })
       .catch(error => error)
}

store / configureStore.js

import rootReducer from 'src/reducers/root';
import rootSaga from 'src/sagas';


export default function configureStore() {
    const logger = createLogger();
    const sagaMiddleware = createSagaMiddleware();
    const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

    const store = createStore(
        rootReducer,
        compose(
            applyMiddleware(
                sagaMiddleware,
                logger,
                composeEnhancers
            ),
        )
    );

    sagaMiddleware.run(rootSaga);

    return store;
}

Я трачу 2 дня, чтобы решить эту проблему, но безрезультатно.Chrome показал мне эту ошибку:

Answer 1

Ну, я нашел свою проблему, но я не понимаю, почему.Я добавил этот код.

store / index.js

export default function configureStore() {
    const logger = createLogger();
    const sagaMiddleware = createSagaMiddleware();
    const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

    const store = createStore(
        rootReducer,
        compose(
            applyMiddleware(
                sagaMiddleware,
                logger
            ),
            window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__() : (fn) => fn
        )
    );

    store.runSaga = sagaMiddleware.run;

    return store;
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';

import { Provider } from 'react-redux';

import configureStore from 'src/store/configureStore';

import Routes from 'src/routes/root';
import rootSaga from 'src/sagas';

const store = configureStore();

store.runSaga(rootSaga);

    ReactDOM.render(
        <Provider store={store}>
                <Routes store={store} />
        </Provider>,
        document.getElementById('root')
    );

Такжеэта строка заставляет мое приложение работать.

window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__() : (fn) => fn

Answer 2

Источник вашей проблемы лежит в функции fetchRandomPhotoApi.Не зная, как это выглядит, я не могу сказать наверняка, но если это, например, функция, которая возвращает обещание, которое вы должны вызывать, как

const { response, error } = yield call(fetchRandomPhotoApi)

Обратите внимание на отсутствие скобок в вызове.

Обновление

Из ваших изменений я теперь вижу, что обещание не разрешено в вашем вызове API.Вы хотите, чтобы эта функция возвращала объект вместо фактического обещания, которое передается вашим действиям.Что-то на линии:

axios({...etc}).then(response => response).catch(error => error)