我该如何使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) 
    } 
    }) 
}