2016-06-18 5 views
0

次のオブジェクトの配列が与えられた場合、入れ子にされた各 "locationData"配列オブジェクトのqtyをどのように更新すればよいでしょうか?結局のところ、私はオブジェクト内のすべてではなく、すべてのオブジェクト内のすべてを意味します。基本オブジェクトはItemといい、locationDataはアイテムが入っている場所です。Reduxで複数のネストされたオブジェクトを更新する方法

私が行っているのは、場所のあるすべてのアイテムをユーザーに表示することで、別のボタンをクリックして割り当てられていない数量選択した分布ですべてのオブジェクトを更新する場所に移動します。

  1. Reactコンポーネントのデータをループして、新しいlocationData配列を持つ各アイテムのディスパッチを行い、古いものを置き換えますか?
  2. アクション内のアイテムをループして、新しいlocationDataで全く新しいアイテムの配列でリダンダントを呼び出すことはできますか?

私はImmutableJsの有無にかかわらず、これを行うことができますが、これを実行する最良の方法はわかりません。

[ 
{ 
    "isSelected":false, 
    "itemid":"2557", 
    "name":"Accessories : Awesome Cable", 
    "quantity":6000,"quantityByCase":600, 
    "locationData":[ 
     {"id":"5","name":"QA Location","enabled":true,"percentage":"200","shipcarrier":"","shipmethod":"","qty":0}, 
     {"id":"7","name":"Single Bin Location","enabled":true,"percentage":"50","shipcarrier":"","shipmethod":"","qty":0}, 
     {"id":"1","name":"Warehouse - East Coast","enabled":true,"percentage":"","shipcarrier":"1","shipmethod":"92","qty":0} 
    ], 
    "unAllocatedQuantityByCase":600 
}, 
{ 
    "isSelected":false, 
    "itemid":"40", 
    "name":"Accessories : Crusher Game Pad", 
    "quantity":50,"quantityByCase":50, 
    "locationData":[ 
     {"id":"5","name":"QA Location","enabled":true,"percentage":"200","shipcarrier":"","shipmethod":"","qty":0}, 
     {"id":"7","name":"Single Bin Location","enabled":true,"percentage":"50","shipcarrier":"","shipmethod":"","qty":0}, 
     {"id":"1","name":"Warehouse - East Coast","enabled":true,"percentage":"","shipcarrier":"1","shipmethod":"92","qty":0} 
    ], 
    "unAllocatedQuantityByCase":50}] 

現在、私は私の減速EVEN_DISTRIBでの計算をしていますが、これは右に感じることはありません。私がやっていることは、状態全体を取り出し、それをitems変数にマッピングすることです。 items.isSelectedは現時点ではテストのためにtrueにハードコードされています。次に、各アイテムに対して 'unAllocatedQuantityByCase'の均等分布を行い、最後にこのレデューサーのすべてのアイテムと新しい状態を返します。後で加重されたアイテムの分布もありますが、さらに進める前に均等な分布を得たいと思っていました。

export default function (state = [], action) { 
    switch (action.type) { 
    case types.PO_RECEIVED: 
    return state.concat(action.payload); 

    case types.EVEN_DISTRIB: { 
    let items = state.map(item => { 
     item.isSelected = true; 
     if (item.isSelected) { 
     let quantity = item.unAllocatedQuantityByCase; 
     let updateLocations = item.locationData.filter(location => location.enabled); 
     let remainder = quantity % updateLocations.length; 
     let divideqty = (quantity - remainder)/updateLocations.length; 

     let loc = updateLocations.map(location => { 
      var tempQty = divideqty; 
      if (remainder >= 1) { 
      tempQty++; 
      remainder--; 
      } else if (remainder > 0) { 
      tempQty += remainder; 
      remainder = 0; 
      } 
      location.qty = tempQty; 
      return location 
     }); 
     item.locationData = loc; 
     } 
     return item; 
    }); 

    return items; 
    } 

    default: 
    return state; 
}} 

還元剤でこれらの計算を行うべきですか?コンポーネント内でそれらを実行し、それをペイロードとして呼び出す必要がありますか?またはこれを行う良い方法があります...データ構造を正規化し、すべての場所を更新するだけです。私は私の質問は、これらのタイプの計算がReact/Reduxアプリケーションでどこで行われるのかということですね。

答えて

0
  1. アクション:は、アクションオブジェクトを返すだけの機能です。行動に論理がない。
  2. Reactコンポーネントのデータをループし、新しいlocationData配列を持つアイテムごとにディスパッチして古いものを置き換えますか?これは不必要な再レンダリングを引き起こし、毎回状態が変わる原因になりますディスパッチ。
  3. 一部のコードを表示 あなたの質問を他の人がそれから学ぶことができるようにあなたの質問を明確にしてください。あなたが何をしようとしているのか明確であること、そしてあなたの説明のポイントまで、何らかのコードを示してください。 あなたを助けてくれることを楽しみにしています。まず
0

、Reduxの店で、ネストされたまたはリレーショナルデータを整理するための一般的な推奨される方法は、多くのデータベース内のテーブルのように、それを正規化することです。これにより、あなたの国は平凡で管理しやすくなります。この概念の詳細については、http://redux.js.org/docs/FAQ.html#organizing-state-nested-dataおよびhttps://medium.com/@adamrackis/querying-a-redux-store-37db8c7f3b0fを参照してください。それはあなたがあなたの更新ロジックを分割したい正確にどのように決定するのはあなた次第ですしながら、

第二に、一般的にその作業は、アクションの作成者または減速中に行われるべきであるが、あなたのコンポーネントでないhttp://redux.js.org/docs/FAQ.html#structure-business-logicでは、そのロジックを分割する方法についていくつかの提案があります。一部の人々は、アクションクリエイターのすべての作業を行い、単純にアクションの内容を店舗に併合するようにレデューサーを残し、他の人はアクションクリエーターだけをディスパッチして、レデューサーにすべての作業をさせます。私は個人的に中間のどこかにいます - 私は減量兵が仕事をするための行動に十分な情報を入れようと努力しています。そして、行動作成者に準備計算をさせてもらいたいのですが、最小。

第3に、現在のレデューサーロジックは非常に複雑に見えます。少なくとも、それを考えるのは簡単で、より小さく、よりシンプルな純粋なヘルパー関数に分解することをお勧めします。また、Reduxを使用するとデータを "不変的に"更新する必要があります。つまり、常にコピーを作成してコピーを変更し、元のバージョンを変更しないでください。線location.qty = tempQty;は、元のデータの一部に直接変異があるように見えます。これにより、通常、Reactコンポーネントが正しく更新されません。 (item.selected = true行も同様です。)

関連する問題