は私のリアクト/ Reduxの/ axiosアプリでReduxのAxios

Question

反応し、私はこのように私の店を作成します。

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

その上にマッピングすることによって、私のコンポーネントでlistetされています

しかし、データを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); 

：あなたは、サンクのようないくつかのミドルウェアを使用することができ、非同期API呼び出しのために

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

Answer 2

：あなたの減速で次に

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

。ここにnpmパッケージのリンクがあります。私はそれが斧とうまくいっていると思う。 https://www.npmjs.com/package/redux-api-handling-middleware