レスポンスの前にAPI非同期呼び出しが返される

Question

データを取得して後で使用するためにReduxストアに配置する必要があるReact-Redux Webアプリケーションがあります。私はデータを取得する関数を呼び出しますが、関数は応答を設定する前に戻り、アクションは未定義としてストアに送られます。 下記の私の仕事：応答を実行する上で動作しませんでした

function getFoo() 
{ 
    return fetch(url, { 
     headers: { 
     'Content-Type': 'application/json' 
     }, 
     method: 'post', 
     body: JSON.stringify(
      { 
       "foo":{}, 
       "bar":{} 
      } 
     ) 
    }).then((resp) => resp.json()) 
     .then(function(data){ 
      return data 
     }) 

} 

export const fooAction=() => { 

return { 
    type:'STORE_FOO', 
    result:getFoo() 
}; 
} 

は、それが[約束] [オブジェクト]返されました。

同じことがあまりにもこの関数で起こった：

async function getFoo() { 

    try { 
     let response = await fetch(url, { 
            headers: { 
             'Content-Type': 'application/json' 
            }, 
            method: 'post', 
            body: JSON.stringify(
             { 
              "foo":{}, 
              "bar":{} 
             } 
            ), 
           }); 
     let data= await response.json() 
     return await data; 
    } catch (e) { 
     return e.message; 
    } 
} 

は、どのように私は私の行動を続行する前に、実際の応答値、JSONオブジェクトを取得することができますか？

Answer 1

まず、react-reduxアプリで非同期呼び出しを処理するには、redux-thunkをミドルウェアとして使用する必要があります。

また、アクション関数は、オブジェクトを返すだけでなく、アクションをディスパッチする必要があります。

export const fooAction =() => { 
    return dispatch => { 
    dispatch(
    type:'STORE_FOO', 
    result:getFoo() 
    }); 
}; 
}