Как устранить ошибку из обещания вactjs

Question

Мне нужно руководство, чтобы справиться с этой ошибкой. Код должен получать результаты от WebAPI при прохождении действий и сервисов. В действиях есть рассылка, где ошибка. На моей странице действий он должен вызывать сервис для WebAPI и зависеть от отправки ответа редукторам на действия. Код не передает первую отправку в jobActions.getjobs ()

Полученная ошибка:

необработанное отклонение (TypeError): _actions_job_actions__WEBPACK_IMPORTED_MODULE_1 __. JobActions.getJobs (...). Тогда не является функцией

Page Load
import React from 'react';
import { jobActions } from '../../actions/job.actions';

class LoadTable extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            data: [],
        }
    }
         componentDidMount() {
        this.props.getJobs()
            .then((res) => {
                this.setState({ data: res.response || [] })
            });
    }
render() {
return ();
}
 const mapDispatchToProps => dispatch => ({ getJobs: () => dispatch(jobActions.getJobs()) });
export default connect(mapDispatchToProps)( LoadTable );  
===============================================
Actions
import { jobConstants } from '../constants/job.constants';
import { jobService } from '../services/job.service';

export const jobActions = {
    getJobs
};
let user = JSON.parse(localStorage.getItem('user'));
function getJobs() {     
    return dispatch => {        
        dispatch(request());
        return jobService.getJobs()
            .then(
                results => {                    
                    dispatch(success(user));
                    return { results };
                },
                error => {
                    dispatch(failure(error));
                }
            );
    };
    function request() { return { type: jobConstants.JOB_REQUEST }; }
    function success(user) { return { type: jobConstants.JOB_SUCCESS, user }; }
    function failure(error) { return { type: jobConstants.JOB_FAILURE, error }; }
 }

=======================================================
services
export const jobService = {
  getJobs
};

const handleResponseToJson = res => res.json();
function getJobs() {

    return fetch('http://localhost:53986/api/jobs/getoutput')
        .then(handleResponseToJson)
        .then(response => {
            if (response) {
                return { response };
            }
        }).catch(function (error) {
            return Promise.reject(error);
        });
}

Результатом должны быть данные таблицы со страницы служб, диспетчеризация страницы действий в зависимости от этапа.

Answer 1

Полагаю, вы используете какое-то промежуточное программное обеспечение, например, redux-thunk?Если нет, то создатель вашего действия возвращает функцию, которая не поддерживается чистым приставом

Я полагаю, что вы делаете, потому что ошибка говорит о том, что создатель действия возвратил неопределенное значение после того, как оно было вызвано

    function getJobs() {    
    console.log("test -1");
    return dispatch => {
        console.log("test-2");
        dispatch(request());
        jobService.getJobs()  // <==== here comes the promise, that you don't return
     // return jobService.getJobs()  <== this is the solution
            .then(
                results => {
                    console.log("test -3");
                    dispatch(success(user));
                    return { results };
                },
                error => {
                    dispatch(failure(error));
                }
            );
    };

Обновление: вам также необходимо отобразить ваше действие в mapDispatchToProps

Page Load
import React from 'react';
import { jobActions } from '../../actions/job.actions';

class LoadTable extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            data: [],
        }
    }
     componentDidMount() {
       this.props.getJobs() // as the name of mapDispatchToProps says, you mapped your action dispatch
                            // to a getJobs prop, so now you just need call it
            .then((res) => {
                this.setState({
                    data: res.response || []
                })            
            }));      
    }

render() {
return ();
}
const mapStateToProps = state => ({});
const mapDispatchToProps = dispatch => ({
  // this function will dispatch your action, but it also mapps it to a new prop - getJobs
  getJobs: () => dispatch(jobActions.getJobs()) 
});
export default connect(mapStateToProps, mapDispatchToProps)( LoadTable );