Get undefined from Redux store

Question

When I load the page I get

"Uncaught (in promise) TypeError: Cannot read property 'data' of undefined" from the reducer.js

The problem is that Actions.getResults() returns undefined. I drilled down to actions/api.js function makeRequest() and it makes a request and gets data.

console.log(responseAction) before store.dispatch(responseAction) shows that it has all the data, but Actions.getResults() returns undefined.

I suspect it might be connected with async actions, but I cannot figure out what is exactly wrong. Any help would be appreciated.

index.jsx

const Actions = require('./actions');
const React = require('react');
const Results = require('./results.jsx');
const Store = require('./store');
const Qs = require('qs');

class SearchPage extends React.Component {
constructor(props) {
    super(props);
    const query = Qs.parse(this.props.location.search.substring(1));

    Actions.getResults(query);

    this.els = {};
    this.state = Store.getState();
}

componentWillReceiveProps(nextProps) {
    const query = Qs.parse(nextProps.location.search.substring(1));
    Actions.getResults(query);
}

componentDidMount() {

    this.unsubscribeStore = Store.subscribe(this.onStoreChange.bind(this));
}

onStoreChange() {
    this.setState(Store.getState());
}
render() {
    return (                  
            <Results data={this.state.results.data} />        
    );
}
}
module.exports = SearchPage;

actions.js

const ApiActions = require('../../../../actions/api');
const Constants = require('./constants');
const Store = require('./store');

class Actions {
static getResults(data) {

    ApiActions.get(
        '/api/admins',
        data,
        Store,
        Constants.GET_RESULTS,
        Constants.GET_RESULTS_RESPONSE
    );
}
module.exports = Actions;

reducers/results.js

const Constants = require('../constants');

const initialState = {
hydrated: false,
loading: false,
error: undefined,
data: [],
pages: {},
items: {}
};
const reducer = (state = initialState, action) => {

switch (action.type) {

    case Constants.GET_RESULTS:
        return Object.assign({}, state, {
            hydrated: false,
            loading: true
        });
    case Constants.GET_RESULTS_RESPONSE:
        return Object.assign({}, state, {
            hydrated: true,
            loading: false,
     error>>data: action.response.data,
            pages: action.response.pages,
            items: action.response.items
        });

    default:
        return state;
}
};


module.exports = reducer;

/actions/api.js

const JsonFetch = require('../helpers/json-fetch');

class Actions {
static get(url, query, store, requestType, responseType) {

    const request = { method: 'GET', url, query };

    return this.makeRequest(request, store,requestType, responseType);
}



static async makeRequest(request, store, requestType, responseType) {

    store.dispatch({ type: requestType, request });

    const responseAction = { type: responseType };

    try {
        responseAction.data = await JsonFetch(request);
    }
    catch (error) {
        console.warn(`API: ${request.method} ${request.url}:`, error);

        responseAction.error = error;
    }

 >>>> console.log(responseAction) = Object
    store.dispatch(responseAction);
 >>>> console.log(responseAction) = nothing

    return responseAction;
}
}
module.exports = Actions;

store.js

const Redux = require('redux');
const Results = require('./reducers/results');


module.exports = Redux.createStore(
Redux.combineReducers({
    results: Results
})
);

Answer 1

1) getResults method doesn't return anything. It should return promise for receving results

2) SearchPage constructor is sync, so you are trying to get results of async function synchronously. Here you will create request - then trying to get state from store, and afterall request will be completed and update your store.