reduxで複数のアクションクリエーターをディスパッチするための共通APIの使い方

Question

私の状態に2つのオブジェクトがあり、要求にidを渡してデータを取得するための共通APIを呼び出します。

私のは、私の状態でsectionAを更新するためにreceiveSectionAを起動する最初のセクションを呼び出します。

export function fetchSection(sectionCode){ 
    return(dispatch,getState,api)=>{ 
    const endPoint = 'url/?sectionCode='+sectionCode 
    const method = 'GET' 
    const isAuth = true 
    const promise = api(endPoint,method,isAuth) 
    promise 
    .then(response => 
     response.json().then(json => ({ 
     status:response.status , 
     json 
     }) 
    )) 
    .then(
     ({ status, json }) => { 
     if(status >= 200 && status < 300) { 
      const sectionDictionary = utils.convertSectionsToDictionary(camelizeKeys(json)) 
      dispatch(receiveSectionA(sectionDictionary)) 
     } 
     if (status >= 400) { 
      //throw error 
     } 
     }, 
     err => { 
     console.log("error"+err); 
     } 
    ); 
    } 
} 

は今、私は、次の火災sectionBに同じ電話をかける： -

dispatch(receiveSectionB(sectionDictionary)) 

今すぐ上記 fetch呼び出しが同じであるため、私は、これは一般的なことができますどのような方法があります。あまりにも多くのコードリピートがあると私は感じています。

sectionCodeに基づいて異なるアクションを送信するスイッチケースについて考えていましたが、私は約20のセクションを持ち、コードが実際に複雑になると思います。

これを処理する方が良いですか？

Answer 1

あなたが理解している通り、dynamic function callを探しています。 evalを使用すると、予期しない結果につながる可能性があります。したがって、注意して使用してください。

receiveSectionAとreceiveSectionBの2つの機能があります。

export function fetchSection(sectionCode){ 
    return(dispatch,getState,api)=>{ 
    .................... 
    )) 
    .then(
     ({ status, json }) => { 
     if(status >= 200 && status < 300) { 

      const sectionDictionary = utils.convertSectionsToDictionary(camelizeKeys(json)) 
      let funToCall = 'receiveSection' + sectionCode + '(sectionDictionary)'; // preparing function to call 
      dispatch(eval(funToCall)); // Calling Function 
     } 
     if (status >= 400) { 
      //throw error 
     } 
     }, 
     err => { 
     console.log("error"+err); 
     } 
    ); 
    } 
} 

編集： この上でビットを熟考した後eval特にSecurity部 - https://www.nczonline.net/blog/2013/06/25/eval-isnt-evil-just-misunderstood/

Answer 2

詳細についてはこちらをご覧ください、はっきりevalは良いオプションではありません。

私は、Javascriptがサポートしている機能をパラメータとして渡すという驚くべきことの1つを試してみると思いました。

アクションをディスパッチしている間、私はreceiveActionCreatorをコールバックとして渡します。

ので、私のfetchは今、次のようになります - 私は、コードの重複を回避することによって異なるセクションからアクションをディスパッチするとき

export function fetchSection(callback,sectionCode){ 
    return(dispatch,getState,api)=>{ 
    .................... 
    )) 
    .then(
     ({ status, json }) => { 
     if(status >= 200 && status < 300) { 

      const sectionDictionary = utils.convertSectionsToDictionary(camelizeKeys(json)) 

      dispatch(callback(sectionDictionary)); // Calling Function 
     } 
     if (status >= 400) { 
      //throw error 
     } 
     }, 
     err => { 
     console.log("error"+err); 
     } 
    ); 
    } 
} 

今、私は別の点から複数の受信者を渡すことができます。

Answer 3

私はあなたのコードの多くをレデューサーから見ることはできませんが、あなたは行動のあまりにも多くの論理を持っているようです。通常、アクションはアプリの状態を変更することを意図しているだけなので、アプリ状態の形状について2回考えて、減速機が状態を計算できるアクションに最小限の情報を提供してください。また、jsonを変換して各リクエストのステータスコードを確認する必要がある場合は、apiモジュールで実行しないでください。エラーについて何もできない場合は、それらを処理したり、apiで処理したり、アプリケーション状態で反映させたりしないでください。アプリビジネスロジックは常に減速家に住んでいます。この後、あなたの行動は良く見え、コードの繰り返しについて心配する必要はありません。これがあなたを助けることを願っています

Answer 4

これを検索した後、私は最後にredux-docsで何かを見つけました。

私は繰り返し使用するリデューサロジックを使用して、繰り返し動作、状態を処理しました。これは基本的に、私がパラメータとしてidを渡してから私のidから動的にアクション型を動的に作成する私の減算器関数の周りに親関数をラップします。

次のコードは、実際にはっきりと説明する必要があります。そのドキュメント自体から。

function createCounterWithNamedType(counterName = '') { 
    return function counter(state = 0, action) { 
     switch (action.type) { 
      case `INCREMENT_${counterName}`: 
       return state + 1; 
      case `DECREMENT_${counterName}`: 
       return state - 1; 
      default: 
       return state; 
     } 
    } 
}