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}/>)}

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

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），然后立即期望以下代码行中的结果。要正确执行此操作，您需要请求数据，然后执行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 }})
});

然后在你的减速器中：

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

Answer 2

对于异步api调用，您可以使用像thunk这样的中间件。这是npm包的链接。我认为它与axios一起工作得很好。 https://www.npmjs.com/package/redux-api-handling-middleware

React Redux Axios

2 个答案: