私はどのようにしてアクションをディスパッチして約束を返すことができますか？

Question

ここで私はので、私はコンポーネント内にこのような関数を使用することができ派遣後の約束を返すことができるようにしたいsongAction.js

export function createSong(title, url, token) { 

    axios.defaults.headers.common['Authorization'] = token 

    return function (dispatch) { 
     axios.post('http://localhost:8080/api/song/create', { 
      title, 
      link: url 

     }) 
     .then((response) => { 
      console.log('the response was', response) 
      if(response.data.success){ 
       dispatch({type: "CREATE_SONG_FULFILLED", payload: response.data.song}) 
      } else { 
       dispatch({type: "CREATE_SONG_REJECTED", payload: response.data}) 

      } 
     }) 
     .catch((err) => { 
      dispatch({type: "CREATE_SONG_REJECTED", payload: err}) 
     }) 
    } 
} 

で私の関数である -

createSong(title, url, token) 
    .then((result) =>{ 
     // do stuff with result 
    }) 

私が知っている私は、この仕事を非同期にするコールバックを渡すことができますが、私は約束のES6機能を使いたいと思います。そして私はこれをどうやってやれるのか少し混乱しています。

Answer 1

完全なES6に移行するには、async/await構文を使用する必要があります。これにより、約束事に対処する必要がなくなります。

export function createSong (title, url, token) { 
    axios.defaults.headers.common['Authorization'] = token 
    return async (dispatch) => { 
    try { 
     const response = await axios.post('http://localhost:8080/api/song/create', { 
     title, 
     link: url 
     }) 
     console.log('the response was', response) 
     if (response.data.success) { 
     dispatch({type: 'CREATE_SONG_FULFILLED', payload: response.data.song}) 
     } else { 
     dispatch({type: 'CREATE_SONG_REJECTED', payload: response.data}) 
     } 
    } catch (err) { 
     dispatch({type: 'CREATE_SONG_REJECTED', payload: err}) 
    } 
    } 
} 

createSongによって返された匿名関数は、新しいasyncキーワードでマークされています。これは、無名関数が暗黙のPromiseを返すようになることを意味します。

asyncキーワードはまた、あなたがaxios.postに非同期呼び出しをawait、それは同期呼び出しであるかのように扱うことができるようにあなたが関数の本体にawaitを使用することができます。

もう1つの利点は、通常のtry/catchブロックを使用することに戻ることができることです。これらは実際には暗黙の約束を解決して拒否していますが、通常のやり方で行動します。

createSong(...)関数を呼び出したときに、匿名関数が実際にPromiseを返すので、呼び出しチェーンを高くすると、async/await構文を使用することもできます。コールバックがなくなり、明示的なPromiseの処理が不要になりました。

Answer 2

まず、axiosコールを返す必要があります。

... 
return function (dispatch) { 
    return axios.post('http://localhost:8080/api/song/create', { 
    title, 
    link: url 
    }) 
... 

あなたcreateSong関数が別の関数を返している（それはカレー機能です）。したがって

、

createSong(title, url, token)(dispatch) 
.then(()=>{ 
    // something 
}) 

は、私にはかなり有効になります。

Answer 3

私は、ディスパッチされたアクションの戻り値を使用することは非常に「リアクション」方法ではないと思います。

このような複雑な状況を解決するには、Redux Sagaの例hereを使用する方が良い方法があります。

私は過去にこのように派遣されたアクションによって返された値を使用し、けれども：

export const updatePage = (id, batch) => { 
    return dispatch => { 
    dispatch({ 
     type: 'UPDATE_PAGE', 
     payload: { 
     id 
     } 
    }) 

    // Make an API call 
    return requestUpdatePages(
     id, batch 
    ).then(data => { 
     // When API call is successful 
     return dispatch({ 
     type: 'UPDATE_PAGE_SUCCESS', 
     payload: { 
      id, 
      data 
     }) 
    }) 
    .catch(error => { 
     // When API call fails 
     return dispatch({ 
     type: 'UPDATE_PAGE_FAIL', 
     payload: { 
      error, 
      id 
     }, 
     error: true 
     }) 
    }) 
    } 
} 

// After dispatch is bound to action creators 
// you can use it like this 

handleClick(id) { 
    const { updatePage } = this.props 
    updatePage(id).then(action => { 
    if(action.type === 'UPDATE_PAGE_SUCCESS') { 
     console.log('Whee, page has been updated!', action.payload.data) 
    } else { 
     console.error('Something went wrong :-(', action.payload.error) 
    } 
    }) 
}