クローンしてから還元法で突然変異を起こす

Question

私はしばらくの間、レフィックスのものを読んできました。そして私には奇妙なことがあります。人々のほとんどの例では、すべてのコピー論理は減速器を介して処理されます。 私はtypescriptを使用しており、よりクラスベースのアプローチを採用したいと考えています。しかし、多分私は何かを逃しています。

私はショッピングカートクラスを持っているとしましょう。カート減速機およびカートの動作に加えて。

export class Cart 
{ 
    private items:{[key:string]:number} = {}; 

    constructor(items:{[key:string]:number} = {}) 
    { 
     Object.assign(this.items, items); 
    } 

    public addItem(id:string) 
    { 
     this.items[id] = this.items[id]?this.items[id]+1:1; 
    } 

    public removeItem(id:string) 
    { 
     this.items[id]--; 

     if(this.items[id] <= 0) 
     { 
      delete this.items[id]; 
     } 

    } 

    public setItemsCount(id:string, count:number) 
    { 
     this.items[id] = count; 
    } 

    public clone():Cart 
    { 
     return new Cart(Object.assign({}, this.items)); 
    } 

} 

だから、ここで私はクラスのロジックをクローニングincapsulatingよ： それは次のように見えます。

そして、私の減速に私が署名して行くだろう。そして、それらを突然変異してから戻って、普遍的な方法を経由して、単にディープクローンオブジェクトに関する

function reducer(state = new Cart(), action:Action): Cart { 
    //first clone, then mutate, then return 
} 

あるいは、実際に、どのように？そのアプローチについて何が悪いですか？

Answer 1

これはいくつかの理由で悪い習慣とみなされます。

まず、クラスインスタンスを状態に維持することは避けてください。because it will break time-travel debugging。あなたはできますそれを行うが、それは "正しい"方法ではありません。

第2に、あなたのクラスはその内容を直接突き詰めています。これにより、タイムトラベルのデバッグも中断され、result in your connected React components not re-rendering properlyとなります。

第3に、ReduxはOOPではなくより機能的なアプローチを推奨します。

Reduxのは、必要とする理由は、一般的な慣行がReduxのを使用するために存在する理由、そしてなぜ他のアプローチがあることも技術的なものを制限あなたは上で詳細に入る私の2件の最近のブログ記事、The Tao of Redux, Part 1 - Implementation and IntentとThe Tao of Redux, Part 2 - Practice and Philosophy、一読することをお勧めします可能慣用的ではありません。

Answer 2

このようになる可能性があります。結局のところ... Reduxアーキテクチャが必要とする不変性の契約を尊重します。

しかし、私はそれをすることをお勧めしません。

ディープクローニングは全く機能しません。あなたの店が大きいほど、あなたのアプリは遅くなります。 https://github.com/maxime1992/pizza-sync/blob/5212a29ee9be916383f759a3a129f7b580ed32ea/frontend/src/app/shared/state/orders/orders.reducer.ts

そして、それはそう悪くはない：私はclassで、このアプローチを試してみましたhonnestなるように

プラス、。しかし、私は単純な関数を使用して終了しました。

あなたのactionsはここに入力されないので、Typescriptの利点を失うことはありません。https://github.com/maxime1992/angular-ngrx-starter