ReduxRouterEngine Error: TypeError: Cannot read property 'then' of undefined

379 views Asked by At

I'm trying to set the initial state of my electrode app with an http call to another API. I wrote getLatestProducts function that makes the http request and returns a promise that resolves when the request has data with no errors. I know that I have to return a promise from createReduxStore function but I don't know where should I resolve the promise to make this error disappear.

Electrode ReduxRouterEngine Error: TypeError: Cannot read property 'then' of undefined
    at ReduxRouterEngine._handleRender (C:\reactjs\unitest\node_modules\electrode-redux-router-engine\lib\redux-router-engine.js:119:7)
    at _matchRoute.then (C:\reactjs\unitest\node_modules\electrode-redux-router-engine\lib\redux-router-engine.js:85:21)
    at bound (domain.js:280:14)
    at runBound (domain.js:293:12)
    at runCallback (timers.js:637:20)
    at tryOnImmediate (timers.js:610:5)
    at processImmediate [as _immediateCallback] (timers.js:582:5)
From previous event:
    at ReduxRouterEngine.render (C:\reactjs\unitest\node_modules\electrode-redux-router-engine\lib\redux-router-engine.js:62:8)
    at module.exports.req (C:/reactjs/unitest/src/server/views/index-view.jsx:76:27)
    at callUserContent (C:\reactjs\unitest\node_modules\electrode-react-webapp\lib\react-webapp.js:88:17)
    at renderSSRContent (C:\reactjs\unitest\node_modules\electrode-react-webapp\lib\react-webapp.js:171:11)
    at options (C:\reactjs\unitest\node_modules\electrode-react-webapp\lib\react-webapp.js:176:12)
    at handler (C:\reactjs\unitest\node_modules\electrode-react-webapp\lib\hapi\index.js:43:13)
    at Object.internals.handler (C:\reactjs\unitest\node_modules\hapi\lib\handler.js:101:51)
    at request._protect.run (C:\reactjs\unitest\node_modules\hapi\lib\handler.js:32:23)
    at internals.Protect.run (C:\reactjs\unitest\node_modules\hapi\lib\protect.js:59:12)
    at exports.execute (C:\reactjs\unitest\node_modules\hapi\lib\handler.js:26:22)
    at each (C:\reactjs\unitest\node_modules\hapi\lib\request.js:404:16)
    at iterate (C:\reactjs\unitest\node_modules\items\lib\index.js:36:13)
    at done (C:\reactjs\unitest\node_modules\items\lib\index.js:28:25)
    at internals.Auth._authenticate (C:\reactjs\unitest\node_modules\hapi\lib\auth.js:222:16)
    at internals.Auth.authenticate (C:\reactjs\unitest\node_modules\hapi\lib\auth.js:197:17)
    at each (C:\reactjs\unitest\node_modules\hapi\lib\request.js:404:16)
    at iterate (C:\reactjs\unitest\node_modules\items\lib\index.js:36:13)
    at done (C:\reactjs\unitest\node_modules\items\lib\index.js:28:25)
    at internals.state (C:\reactjs\unitest\node_modules\hapi\lib\route.js:362:16)

My code:

import ReduxRouterEngine from "electrode-redux-router-engine";
import {routes} from "../../client/routes";
import {createStore} from "redux";
import rootReducer from "../../client/reducers";
import util from "util";
import http from "http";

const Promise = require("bluebird");
const getLatestProducts = function(count){
 const options = {
  host: "127.0.0.1",
  port: 4000,
  path: '/products/latest/'+count,
  method:'GET',
  header:{
   'Content-Type':'application/json'
  }
 };
 return new Promise((resolve, reject) => {
  http.get(options, (response) => {
   var body = "";
   var errors = "";
   response.on("data", function(chunk){
    body += chunk;
   });
   response.on("errors", function(error){
    errors = error.message;
    return reject(errors);
   });
   response.on("end", function(){
    return resolve(body);
   });
  })
 });
}
    function createReduxStore(req, match) { // eslint-disable-line
let initialState;
 getLatestProducts("12")
 .then((result) => {
  initialState = {
   latestProducts: {products:result, error:null, loading:false}
  };
  return result;
 })
 .then(() => {
  const store = createStore(rootReducer, initialState);
  return Promise.resolve(store); 
 })
 .catch((error) => {
  console.log(error);
  return Promise.reject(error);
 })
 
}

//
// This function is exported as the content for the webapp plugin.
//
// See config/default.json under plugins.webapp on specifying the content.
//
// When the Web server hits the routes handler installed by the webapp plugin, it
// will call this function to retrieve the content for SSR if it's enabled.
//
//

module.exports = (req) => {
  const app = req.server && req.server.app || req.app;
  if (!app.routesEngine) {
    app.routesEngine = new ReduxRouterEngine({routes, createReduxStore});
  }

  return app.routesEngine.render(req);
};

1

There are 1 answers

0
Danial Khansari On BEST ANSWER

I could solve the problem. I have to return a new Promise instance and resolve/reject based on the other function results. so my code for createReduxStore may look like:

function createReduxStore(req, match) { // eslint-disable-line
    let initialState;
    return new Promise((resolve, reject) => {
        getLatestProducts("12")
        .then((result) => {
            initialState = {
                latestProducts: {products:result, error:null, loading:false}
            };
            const store = createStore(rootReducer, initialState);
            resolve(store);
        })
    })
    .catch((error) => {
        console.log(error);
        reject(error);
    })

}