Question

我正在处理分页和排序表。我最初的分页状态是这样的

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字符串。

我也可以在thunk的成功中发送changePage动作。哪种方法更好，为什么？

Answer 1

我使用的模式是

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是反应还原thunk并发送两个动作

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 } ) );
    }
}

此模式运行良好，因为您只需要担心更改组件中的页面而不需要处理网络错误等其他内容

Redux何时在异步操作之前或之后更新状态？

1 个答案: