将xhr数据加载到Redux路由页面时的事件顺序是什么？

Question

我是一个反应迟钝的人，我把自己弄糊涂了。

以下是我想要实现的目标：

/myapp/#/

• 全局导航，带有指向/myapp/#/和/myapp/#/产品的链接

/myapp/#/产品

• 全局导航（如上）
• 从axios GET XHR请求中检索到的产品列表。每个产品都链接到 /myapp/#/产品/{productId}

/myapp/#/产品/{productId}

• 全局导航（如上）
• 产品一览（如上）
• 产品详细信息面板，显示从另一个axios GET XHR请求中检索到的其他详细信息

用户应该能够单击列表中的产品以在inset product details面板中查看详细信息，但不应重新请求列表XHR请求。

我的代码

/index.js

    ...
    //I don't think this is the right place for this code...
    function loadProductListData() {
        store.dispatch(fetchListData('/api/products'))
    }

    render(
        <Provider store={store}>
            <Router history={history}>
                <Route path="/" component={HomePage} />
                <Route path="/products(/:productId)" component={ProductsPage} onEnter={loadProductListData} />
            </Router>
        </Provider>,
        document.getElementById('root')
    )
    ...

/组件/菜单。js公司

    import React from 'react'
    import { Link } from 'react-router';

    const Menu = () => (
        <ul>
            <li><Link to={''}>Home</Link></li>
            <li><Link to={'products'}>Products</Link></li>
        </ul>
    )

    export default Menu

/components/productList.js

    import React from 'react'
    import { Link } from 'react-router';

    class List extends React.Component {

        constructor(props) {
            super(props)
        }

        render() {
            return (
                <ul>
                    {
                        this.props.products.map(product =>
                            this.renderRow(product)
                        )
                    }
                </ul>
            )
        }

        renderRow (product) {
            return (
                <li key={product.id}><Link to={'products/' + product.id}>{product.name}</Link></li>
            )
        }
    }

    export default List

/行动。js公司

    export const REQ_DATA = 'REQ_DATA';
    export const RECV_DATA = 'RECV_DATA';
    import axios from 'axios'

    function requestData() {
        return {type: types.REQ_DATA}
    }

    function receiveData(json) {
        return{
            type: types.RECV_DATA,
            data: json
        }
    }

    export function fetchListData(url) {
        return function(dispatch) {
            dispatch(requestData())
            return axios({
                url: url,
                timeout: 20000,
                method: 'get',
                responseType: 'json'
            })
                .then(function(response) {
                    dispatch(receiveData(response.data))
                })
                .catch(function(response){
                    //
                })
        }
    }

我上面的代码可以工作，但是我现在对下一步做什么感到困惑。我不确定我应该在路由上使用onEnter来触发XHR请求，因为指向产品详情页的链接经过相同的路由，并为列表数据触发相同的XHR。

我的问题是，我是否应该使用onClick处理程序来触发XHR、更新状态（导致组件重新呈现），然后手动推送到新路由，而不是使用Link？简单地重新路由链接是否正确，以及路由是否可能触发其他所有内容？正如我所说，我不想在重新路由时重新加载列表组件。

对于这样的应用程序的方法和架构的任何其他一般性建议都将不胜感激。

Answer 1

您应该更倾向于调度组件WillMount（）中的loadList操作，并在您的List组件中实现应由组件更新的回调来控制阉羊组件是否应该再次呈现/更新-基于您的状态。

例如：

    shouldComponentUpdate(nextProps, nextState) {
       return this.props.products !== nextProps.products;
    }

检查以下位置的文档https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate

然后在后端使用“301-Not Modify”标头，如果您的产品列表中没有任何更改，则不总是返回相同的数据。

要加载产品详细信息，您可以在componentWillReceiveProps中调度详细信息加载操作，如下所示：

componentWillReceiveProps(nextProps) {
  if (this.props.params.id !== nextProps.params.id) {
    this.props.dispatch(fetchDetailProduct(nextProps.params.id));
  }
}

这样您就可以检查用户是否单击了不同的产品ID。如果是这样，则会分派加载此详细信息数据的操作。该组件将根据您的还原流使用您的新产品详细信息数据进行更新。

作为一个架构建议，我还建议您为您的操作命名更好的名称，如“PRODUCT/FETCH\u LIST”、“PRODUCT/FETCH\u LIST\u RECEIVED”、“PRODUCT/FETCH\u LIST\u ERROR”。

我还建议使用Immutable。js公司(https://facebook.github.io/immutable-js)为了你的州。由于它为所有对象提供了一些有效的equals（）检查，因此识别状态中的更新会容易得多。具有不可变的。js数据结构，您的shouldComponentUpdate将如下所示：

    shouldComponentUpdate(nextProps, nextState) {
       return !this.props.products.equals(nextProps.products);
    }