CODEWITHSUNDEEP
reactjsreact-redux
Paradigm
Paradigm

Reputation: 189

How to resolve the error from a promise in reactjs

I am in need of guidance with getting through this error. The code is supposed to get the results from WebAPI while going through actions and services. In the actions is a dispatch where the error is. On my actions page it should call the service for WebAPI and depend on the response dispatch to the reducers for actions. The code does not pass the first dispatch in the jobActions.getjobs()

The error received from this is:

Unhandled Rejection (TypeError): _actions_job_actions__WEBPACK_IMPORTED_MODULE_1__.jobActions.getJobs(...).then is not a function

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

The result should be table data from the services page, actions page dispatching depending on the stage.

Upvotes: 0

Views: 682

Answers (1)

dspring
dspring

Reputation: 194

I assume you are using some sort of a middleware, like redux-thunk? If not, then your action creator returns a function, which is not supported by pure redux

I guess you do, because the error says that the action creator returned undefined after it was called

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

Update: you also need to map your action in 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 );

Upvotes: 1

Related Questions