反应路线和Redux异步数据请求

Question

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

这是默认存储：

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

当我加载发票列表页I：

1. 加载所有发票编号（Ajax请求）
2. 负载所有客户（阿贾克斯请求）

当我点击发票我使用react-route路由到发票/ {123}页面，其中我需要特定invoiceId的客户收款和发票明细。

点困惑：

1）当我的路线到一个新的页面，我的商店仍然包含顾客[]和invoicenumber []，但我没有对它们的访问，因为路线不通店相关道具他们？所以我必须做的是创建一个getCustomers动作创建器，它仅仅为客户返回状态。这看起来不正确。

2.）I 想要创建一个动作创建者...说loadCustomers（）...将返回商店中已有的东西，但如果是空的，将发出ajax请求以将商店加载到客户。但是ActionCreators 无法访问现有商店，因此他们如何知道商店是否为空？他们只能拨打减速机，我是否正确？我怎么做到这一点？

3.）当我需要发票的详细信息时，我想创建一个ajax请求，然后将数据存储在invoiceDetails []集合中。当我路由到发票详细信息页面时，我只想要那个页面中的一个invoiceDetail记录，但是如果我导航到和来自不同的发票详细信息页面，我只想发出一个ajax请求，如果数据不在该invoiceDetails [ ]集合。

问题：
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）也应该涵盖这种情况。