Reduxレデューサーのデータを使用したAPI呼び出し？

Question

私はそれを発送した後にReducer（更新された状態）のデータを使用してサーバーにAPIリクエストを行います。私は十分なデータがあればディスパッチャでそれをしたでしょうが、私はディスパッチャに必要なデータだけを送ります。

どうすればよいですか？

/* Book list container*/ 
 
const mapStateToProps = (state) => { 
 
    return { 
 
     books: state.bookApp.books  
 
    } 
 
} 
 

 
const mapDispatchToProps = (dispatch) => { 
 
    // Calling change book title from component 
 
    return { 
 
     // Dispatch new title to the book list by it's id 
 
     onChangeBookTitle: (id, newTitle) => { 
 
     dispatch(updateBookTitle(id, newTitle)) 
 
     } 
 
    } 
 
} 
 

 
// Connect redux to bookList component 
 
export default connect(
 
    mapStateToProps, 
 
    mapDispatchToProps 
 
)(BookList); 
 

 

 
/* Book list action creator */ 
 
export const updateBookTitle = (id, newTitle) => { 
 
    return { 
 
    type: 'EDIT_BOOK_TITLE', 
 
    title: newTitle 
 
    } 
 
}; 
 

 

 
/* Book list reducer */ 
 
// Assume there's already a book to update 
 
const defaultState = { 
 
    bookList: [] 
 
} 
 

 
const bookApp = (state = defaultState, action) => { 
 
    switch(action.type) { 
 
    case 'EDIT_BOOK_TITLE' : { 
 
     let newBookList; 
 
     // Create new copy of booklist 
 
     // Do some transformation 
 
     // And voilaa... i got new book list 
 
     return {...state, bookList: newBookList} 
 
     
 
     // This is the place where I want to do my API call, using the new BookList data 
 
    } 
 
    default: 
 
     return state; 
 
}

Answer 1

これは、サンクアクションの作成者のために良いユースケースである：

export const updateBookTitle = (id, newTitle) => { 
    return (dispatch, getState) => { 
     dispatch({type : 'EDIT_BOOK_TITLE', title : newTitle}); 

     const updatedState = getState();   
     // read values from updated state and make an API call here  
    } 
} 

ただし、がが減速から任意のAPI呼び出しを行うべきではないことに注意してください！これは、Reduxの使用方法には絶対に当てはまります。