2

Olá, estou aprendendo programação funcional e gostaria de saber como aplicar o princípio de imutabilidade nos componentes do angular. Por exemplo, no caso abaixo eu tenho uma lista de arquivos que o usuário seleciona e exibe na tela, para isso eu geralmente crio uma variável fora da função que irá receber estes arquivos e listá-los com *ngFor em uma lista, este tipo de coisa fere o princípio da imutabilidade e torna minha função impura, não é?

    files: FileList

  constructor() { }

  innerWidth: number;
  ngOnInit(): void {
  }

  receivedFiles(files: FileList){
    this.files = files;
  }

1 Resposta 1

2

Essa é uma pergunta complexa que seria melhor explllicada numa palestra que numa resposta de stackOverflow. A primeira coisa que vc tem que reparar é que componentes são classes e no seu caso esse files é uma propriedade dessa classe e não uma variavel.

O segundo ponto importante é entender a diferença entre mutação e reassigment, para isso veja o caso de quando se usa const

const obj ={prop: 'abc'}

obj.prop ='cde' // mutação e funciona com consts 

obj={prop: 'cde'}  // reassigments e não funciona com consts

No angular se deve sempre usar reassigments ao invés de mutação nas propriedades dos componentes isso porque o angular detecta esse reassigment e usa o cdr para atualizar, apesar de tambem atualizar para mutação ela não funciona para pure componentes um ex pro seu caso

this.files=files // detectado para pure componentes

this.files[0]='exemplo' // não detectado para pure componentes
this.files.prop = 'exemplo' // não detectado para pure componentes

No seu caso this.files= é o melhor a se fazer é não é uma mutação.

Um caso comum disso é que sempre se deve fazer um assigment de um resultado de um observable e não uma mutação

Outra dica para evitar mutação é usar array functions (map,filer,reduce) ao invés de for

Dica 3 é use tipos primitivos sempre que possivel por que sempre criam uma nova referencia ao alterarem o valor

Caso queria realmente forçar a ser livre de mutações vc pode usar o object.freeze

O assunto é complexo e tem mais cenarios mas espero que tenha ficado claro.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .