2
respostas

Não seria melhor ter criado uma classe Subscrivable?

Olá!

Percebi que nesta aula tivemos que copiar um código e passar pra outra classe, sendo que poderiamos ter feito isso apenas uma vez como boa prática da maioria das linguagens de programação.

As minhas classes ficaram assim: Subscrivable

export default class Subscrivable {
      constructor() {
            this._inscritos = [];
      }
      subscribe(func) {
            this._inscritos.push(func);
      }

      unsubscribe(func) {
            this._inscritos = this._inscritos.filter(f => f !== func);
      }

      notificar(list) {
            this._inscritos.forEach(func => func(list));
      }
}

Categorias

import Subscrivable from "./Subscrivable";

export default class Categorias extends Subscrivable {
      constructor() {
            super();
            this.categorias = []
      }

      adiconarCategoria(novaCategoria) {
            this.categorias.push(novaCategoria);

            this.notificar(this.categorias);
      }
}

Notas (ArrayDeNotas)

import Subscrivable from "./Subscrivable";

export default class Notas extends Subscrivable {
      constructor() {
            super();
            this.notas = [];
      }

      adicionarNota(titulo, text, categoria) {
            const novaNota = new Nota(titulo, text, categoria);

            this.notas.push(novaNota);
            this.notificar(this.notas);
      }

      apagarNota(index) {
            this.notas.splice(index, 1);
            this.notificar(this.notas);
      }
}

class Nota {
      constructor(titulo, text, categoria) {
            this.titulo = titulo;
            this.text = text;
            this.categoria = categoria;
      }
}

Funciona da mesma forma, a unica diferença é que temos menos lugares para alterar e ainda o código fica mais limpo.

2 respostas

Além disso, os métodos inscrever() e desinscrever() mudaram para subscribe() e unsubscribe()

Oi Gerson!

Muito legal ver que você pegou conhecimentos de outros cursos pra aplicar neste de React!

Realmente, criar uma classe é uma das maneiras de evitar repetição de código. Não tenho muita experiência com class components , mas como o javascript não suporta herança múltipla (mais de um extends), em casos onde seja necessário herdar de outra classe, como a React.Component, não seja possível implementar também a sua Subscribable.

Na abordagem moderna do React utilizando Hooks, seria possível criar um custom hook como useSubscribe que encapsula o estado dos eventos inscritos, assim como a lógica de subscribe e unsubscribe (esse hook não existe nativamente, só estou dando como exemplo).

Parabéns por ter aplicado seu conhecimento para treinar mais no curso! Se tiver mais algum comentário pode postar aqui.

Bons estudos!