從Redux商店獲取未定義的

Question

當我加載頁面時，我得到

來自reducer.js的“未捕獲（承諾）TypeError：無法讀取未定義的屬性'data'”

問題是Actions.getResults()返回未定義。 我深入到action / api.js function makeRequest() makeRequest function makeRequest() ，它發出一個請求並獲取數據。

store.dispatch(responseAction) 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;

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方法不返回任何內容。 它應該返回承諾以取得成果

2） SearchPage構造函數是同步的，因此您嘗試同步獲取異步函數的結果。 在這里，您將創建請求-然后嘗試從商店獲取狀態，畢竟請求將完成並更新商店。