Redux何時在異步操作之前或之後更新狀態？

我正在分頁和排序表上工作。我最初的分頁狀態是這樣的Redux何時在異步操作之前或之後更新狀態？

pagination: { 
    sort: 'id', 
    order: 'asc', 
    page: 1, 
    limit: 10 
}

當用戶點擊我派遣一個行動改變page並且之後我派遣行動，以從服務器獲取數據的頁碼或下一首/上按鈕。這很好，但如果發生服務器錯誤，我應該怎麼做。我在我的腦海

1）兩種解決方案回滾到分頁以前的狀態上的錯誤調度API_ERROR

2）更新分頁狀態只有成功後，所以在得到響應後，我的thunk我派遣updatePagination行動。

我的頁面上點擊當前的處理程序是這樣的

onPageChange (page) { 
    // Dispatch action to change page state 
    this.props.changePage(page) 

    // Dispatch action to fetch from server 
    this.props.fetchSomePaginatedResponse() 
}

然後在thunk fetchSomePaginatedResponse得到分頁對象從國有建設URI字符串。

我也可以調度changePage thunk的成功行動。哪種方法更好，爲什麼？

來源

2016-12-05 Ehtesham

模式我用的是

class Pagination extends Component { 
    ... 
    onPageChange = (event, page) => { 
     event.preventDefault(); 
     this.props.setCurrentPage(page); 
    }; 
    render() { 
     ... 
     return pages.map((page, key) => { 
      return <a 
         key={ key } 
         href={ generatePageUrl(page) } 
         onClick={ event => this.onPageChange(event, page) }> 
         { page } 
        </a> 
     } 
     ... 
    } 
    ... 
} 

export default connect(
    (state) => ({ 
     currentPage: getCurrentPage(state), 
    }), 
    { setCurrentPage } 
)(Pagination);

其中setCurrentPage是反應過來終極版咚，並分派兩個動作

setCurrentPage(dispatch, page) { 
    return (dispatch) => { 
     dispatch({ type: API_PAGE_FETCH }); // Maybe set isFetching: true in your state tree 

     // asyncApiRequest should return a promise 
     asyncApiRequest(`http://api.example.com/get-page?page=${ page }`) 
      .then(data => dispatch({ type: API_PAGE_RECEIVE, data, page })) 
      .catch(error => dispatch({ type: API_PAGE_ERROR, error })); 
    } 
}

這種模式效果很好，因爲你只需要擔心改變頁面在你的組件中，沒有其他事情像處理網絡錯誤等

來源

2016-12-06 00:23:37

Redux何時在異步操作之前或之後更新狀態？

回答

相關問題