React/Redux（este stack）で非同期アクションを実行する方法

Question

私は、還元フローを通過するコードを書きました。ボタンをクリックするとUIに必要な情報が表示されます。

私はeste stackを使用しています。

これは私のボタンです：私はアクションを定義し

const Buttons = ({ requestAsyncData}) => (
    <View> 
    <Button onClick={requestAsyncData}> 
     <FormattedMessage {...buttonsMessages.add100} /> 
    </Button> 
    </View> 
); 

export default connect(state => ({}), { requestAsyncData })(Buttons); 

は今ここにある：ここで

export const REQUEST_ASYNC_DATA = 'REQUEST_ASYNC_DATA'; 

export const requestAsyncData =() => { 

    return { 
    type: REQUEST_ASYNC_DATA, 
    payload: [{ 
     name: "one one!", 
     id: Math.random() 
    },{ 
     name: "two two!", 
     id: Math.random() 
    }] 
    } 

は私の減速である：

const State = Record({ 
    map: Map() 
}, "names"); 

const asyncExampleReducer = (state = new State(), action) => { 
    switch (action.type) { 

    case actions.REQUEST_ASYNC_DATA: { 
     const names = action.payload.reduce((names, json) => 
      names.set(json.id, new Name(json)) 
     , Map()); 
     return state.update('map', map => map.merge(names)); 
    } 

    default: 
     return state; 

    } 
}; 

export default asyncExampleReducer; 

の予想通りこれは正確に動作します正しい情報で更新する、私からの実際のペイロードを取得してください：

payload: [{ 
    name: "one one!", 
    id: Math.random() 
},{ 
    name: "two two!", 
    id: Math.random() 
}] 

今私はの私は、AJAX API呼び出しからそのオブジェクトの情報を取得するとしましょう、このペイロードを非同期に作成しようとしています。

どうすればよいですか？

thunksと一緒に行く必要があるかわからない場合や、hereのようなものを行う必要がある場合は、私はあらゆる種類の推奨事項を試していますが、問題がjavascriptの具体的な問題であるかわかっていない反応する。 ...

は、例えば、私はサンクによって提案されたものと同様の作用を行うことを試みたが、それは派遣を認識しないと、どちらかそれを遅らせていないようです

function doIncrementAction() { 
    return { 
    type: REQUEST_ASYNC_DATA, 
    payload: [{ 
     name: "trufa!", 
     id: Math.random() 
    },{ 
     name: "benja!", 
     id: Math.random() 
    }] 
    } 
} 

export const requestAsyncData =() => { 
    return dispatch => { 
     setTimeout(() => { 
     // Yay! Can invoke sync or async actions with `dispatch` 
     dispatch(doIncrementAction()); 
     }, 1000); 
    }; 
}; 

---

raven.js:290 Uncaught TypeError: Cannot read property 'payload' of undefined 

raven.js:290 Uncaught TypeError: dispatch is not a function 

どうすればよいですか？ありがとう!!

Answer 1

問題は、あなたが実際にReduxの-サンクミドルウェアをインストールしていないように聞こえる：

import { createStore, applyMiddleware } from 'redux'; 
import thunk from 'redux-thunk'; 
import rootReducer from './reducers/index'; 

// Note: this API requires redux@>=3.1.0 
const store = createStore(
    rootReducer, 
    applyMiddleware(thunk) 
); 

そのようなお店を設定した後、あなたの例では、動作するはずです。