Получить неопределенный из магазина Redux

Question

Когда я загружаю страницу, я получаю

"Uncaught (в обещании) TypeError: Невозможно прочитать свойство 'data' of undefined" из reducer.js

Проблема в том, что Actions.getResults() возвращает неопределенное значение. Я детализировал до actions / api.js function makeRequest(), и он делает запрос и получает данные.

console.log(responseAction) перед store.dispatch(responseAction) показывает, что в нем есть все данные, но Actions.getResults() возвращает неопределенное значение.

Я подозреваю, что это может быть связано с асинхронными действиями, но я не могу понять, что именно не так. Любая помощь будет оценена.

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;

редукторы / 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;

/ действия / 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 метод ничего не возвращает. Должен вернуть обещание получения результатов

2) SearchPage Конструктор синхронизирован, поэтому вы пытаетесь получить результаты асинхронной функции синхронно. Здесь вы создадите запрос - затем попытаетесь получить состояние из хранилища, и после этого запрос будет завершен и обновится ваш магазин.