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何时在异步操作之前或之后更新状态？

回答

相关问题