リアクションルートとRedux非同期データリクエスト

Question

私はリアクションルートのデータアクセスに関して標準的な慣行に苦しんでいました。ここでは基本的な例である：

これはデフォルトのストアです：

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

私は請求書一覧ページをロードするとき、私は：

1. ロードすべての請求書番号（AJAXリクエスト）
2. ロードすべてのお客様（Ajaxリクエスト）

請求書をクリックすると、反応ルートを使用して請求書/ {123}ページ。特定の請求書IDの顧客コレクションと請求書の詳細が必要です。混乱の

ポイント：

1）I新しいページへのルート、私の店はまだ[]顧客が含まれており、invoicenumber []が、ルートがないので、私はそれらへのアクセスを持っていない場合にはストア関連の小道具do？ですから、単に顧客の状態を返すgetCustomersアクションクリエイターを作成するだけです。これは正しいとは思わない。

2.）I アクションクリエイターを作成するには... loadCustomers（）...は既にストアにあるものを返しますが、空の場合は、顧客にストアをロードするためのajaxリクエストを行います。 。しかしactionsCreators は既存の店舗にアクセスできないので、店舗が空であるかどうかをどのように知っていますか？彼らは減速機を呼び出すことができます、私は正しいですか？どうすればこれを達成できますか？

3.）請求書の詳細が必要な場合は、ajaxリクエストを作成してから、invoiceDetails []コレクションにデータを保存します。請求書の詳細ページにルーティングすると、そのページに1つのinvoiceDetailレコードだけが必要ですが、別の請求書の詳細ページに移動すると、そのデータがその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コンポーネントはmapStateToPropsファンクションを使用してストア内のすべてのデータにアクセスできるため、ストア内にある場合は、再度取得するために別途リクエストする必要はありません。

3.）私のコレクションに取得したinvoiceDetailレコードを基本的に「キャッシュ」して、必要に応じて再利用するにはどうすればよいですか？

この回答も1）に該当します。