我該如何使redux發送一個動作並返回一個承諾？

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關鍵字，您還可以使用await在函數體中，因此您可以await異步調用axios.post所以把它當作好像它是一個同步調用。

另一個優點是，你可以回去使用正常的try/catch塊。這些實際上是在解決和拒絕背後隱含的承諾，但他們以正常的方式行事。

因爲匿名函數實際上會返回一個Promise，所以在呼叫鏈上方，無論您調用createSong(...)函數，還可以使用async/await語法......等等。沒有更多的回調，也沒有更明確的承諾處理。

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

我認爲它不是非常'React'的方式來使用調度操作的返回值。

有一個更好的方法，如何使用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) 
    } 
    }) 
}