Difficulty performing GET requests in REACTjs without Redux

We're building a react app (without redux; but using webpack) that uses axios to do a GET request to the server, the server receives the request (i.e. we see our console.log statement) but the response to the request is never served, as we get no data back aside from our console.log.. the server seems to be doing nothing with our response.end/response.send statements.

Has anyone dealt with this before? Anyone have any tips? Please see our code below.

//Within our react component file

componentWillMount (){

      console.log("inside of componentWillMount!");

      return axios.get('/api/test')
      .then(function(resp){
        return resp.data;
        console.log('axios response: ', resp);
      })
      .catch(function(resp) {
        console.log('axios catch response ', resp);
      });
    }




//From our server.js file


    // additional middleware to set headers that we need on each request
    app.use(function(req, res, next) {

      // disable caching so we'll always get the latest activities
      res.setHeader('Cache-Control', 'no-cache');
      next();
    });

    app.get('/api/test', function(request, response, err) {
      //mongoose find all here
      console.log("We're in the server!!!");

      response.end("ennnndddd");

      if(err){
        console.log("ERROR!", err);
      }
    });




    app.listen(port, function () {
     console.log('Proxy listening on port 3000!');
    });

Answers


Why are you returning your call from componentWillMount? I don't think you should return your axios call from that react lifecycle event. I dont think it will ever get called.

In reality your data call should not be in your component at all. You should make data calls in you action creator then dispatch it to your reducer.

For Example:

    // Action Creator
    import axios from 'axios'
    export const TEST = 'TEST'

    export function testApi (city) {
      return (dispatch) => {
        axios.get('/api/test').then(
          (resp) => {
            dispatch({
              type: TEST,
              payload: resp.data // or something like that
            })
          },
          (err) => {
            console.error(err)
          }
        )
      }
    }


    // Reducer
    import { TEST } from 'actions/index'

    export default function (state = {}, action) {
      switch (action.type) {
        case TEST:
          return Object.assign({}, state, action.payload)
      }

      return state
    }


    // Component
    componentWillMount () {
      this.props.dispatch(testApi())
    }

Need Your Help

SQL server reporting: subreport doesnt handle page breaks properly when exported to excel

.net excel pdf reporting-services

I am running into a problem where I have a main report which calls sub report; the sub report contains data in matrix control. I am trying to export each week's data on a separate sheet on Excel, but

Installing phpMyAdmin on Amazon Linux

linux amazon-ec2 phpmyadmin

After installing phpMyAdmin on Amazon Linux using these commands...: