Question

在反应路线中的数据访问方面，我一直在努力应对标准做法。这是一个基本的例子：

这是默认商店：

State: {
  invoiceNumbers: [],
  customers: [],
  invoiceDetails: []
}

当我加载发票清单页面时我：

加载所有发票号码（ajax请求）
加载所有客户（ajax请求）

当我点击发票时，我使用react-route路由到Invoice / {123}页面，我需要客户收集和特定invoiceId的发票详细信息。

困惑点：

1。）当我路由到新页面时，我的商店仍然包含客户[]和invoicenumber []，但我无法访问它们，因为路由不传递与商店相关的道具它们？所以我要做的就是创建一个getCustomers动作创建器，它只为客户返回状态。这似乎不对。

2。）我想要来创建一个动作创建者...说loadCustomers（）...它将返回商店中已有的内容，但如果为空，将使ajax请求加载与顾客一起的商店。但actionsCreators 无法访问现有商店，那么他们如何知道商店是否为空？他们只能打电话给减速器，对吗？我该如何做到这一点？

3。）当我需要发票的详细信息时，我想发出一个ajax请求，然后将数据存储在invoiceDetails []集合中。当我路由到发票明细页面时，我只想要该页面中的一个invoiceDetail记录，但是如果我导航到不同的发票明细页面，我只想在该发票详细信息中没有数据的情况下发出ajax请求[详细信息] ]收藏。

问题：
1.）如何如上所述制作动作创建者loadCustomers（）。

2.。）当我路由时，如何正确地将商店中的现有数据传送到组件。

3.。）如何在我的收藏中实际“缓存”检索到的invoiceDetail记录并在必要时重复使用？

感谢您提供任何帮助，您可以在此处提供最佳做法。

Answer 1

1.如何如上所述制作动作创建者loadCustomers（）。

首先，了解动作创建者不是为了返回数据是很重要的。它们用于创建操作，导致存储中的数据更改，从而导致组件更新。这称为Unidirectional Data Flow，是Redux的核心概念。我假设这只是一个术语错误，如果商店已有客户数据，您的意思是您不希望它执行ajax请求。

您希望使用redux-thunk（或其他异步中间件）来实现此目的。你知道你的商店结构和代码比我更好，但这里有一个如何实现它的例子。

function loadCustomers() {
    // thunks can delay dispatches and have access to the store's state
    return (dispatch, getState) => {
        let state = getState()

        // check if customers are loaded
        if (!state.customers) {
            // optional standard action to set a flag somewhere that customers are not ready yet
            dispatch(startLoadingCustomers())

            // load customers 
            fetch("/customers", response => {
                return response.json()
            }).then(data => {
                // dispatch standard action to set customer data in store
                return dispatch(setCustomers(data))
            }).catch(error => {
                // optional standard action to report errors
                return dispatch(setLoadingError(error)
            })
        }
    }
}

2.。）当我路由时，如何正确地将商店中的现有数据传送到组件。

您使用的是react-redux吗？如果您将应用程序包装在Provider中，则任何connect ed组件都可以通过mapStateToProps函数访问商店中的任何数据，因此如果它在商店中，则不需要单独要求再次获得它。

3.。）如何在我的收藏中实际“缓存”检索到的invoiceDetail记录并在必要时重复使用？

1）的答案也应该包括这个案例。

React Routes和Redux异步数据请求

1 个答案: