React Redux Axios

Question

在我的React/redux/axios应用程序中,我创建了这样的商店:

import eventsData from '../api/event';
console.log(eventsData);

const events = [];
Object.assign(events, eventsData);
const defaultState = {
    events
}
export const store = createStore(rootReducer, defaultState);

这工作正常,我的事件通过映射在我的组件中进行监听

 {events.map((event, i) => <CalenderItem key={i} i={i} event={event} {...this.props}/>)}

但是,当我通过axios从JSON导入数据时,商店会获取数据,但事件未列出.导入和存储创建看起来像这样:

const events = [];
axios.get("http://#######/src/api/event")
    .then(result => {
        console.log(result.data.events);
        return Object.assign(events, result.data.events);
    });
const defaultState = {
    events
}
export const store = createStore(rootReducer, defaultState);

这很有趣,因为这console.log两个数据看起来都一样.

Answer 1

您正在使用异步函数(axios.get),然后立即期望以下代码行中的结果.要正确执行此操作,您需要请求数据,然后执行a action以将数据减少到存储中.

const events = [];

const defaultState = {
    events
}

export const store = createStore(rootReducer, defaultState);

然后在您的应用程序的另一部分,以下内容:

axios.get("http://#######/src/api/event").then( data => {
    dispatch({ type: "RECEIVED_DATA", action: { data }})
});

然后在你的reducer中:

switch ( action, state ) {
    case "RECEIVED_DATA"
        return Object.assign({}, state, action.data)