Introdução

Construir grandes aplicativos da web pode ser complicado, especialmente quando você tem muitas informações diferentes para controlar. Mas não se preocupe, o RxJS está aqui para ajudar! É uma ferramenta muito legal que ajuda você a gerenciar todos os seus dados em um só lugar.

Com RxJS, você pode criar coisas chamadas “fluxos de dados” que diferentes partes do seu aplicativo podem usar. É como um grande rio fluindo pelo seu aplicativo, mantendo tudo conectado e sincronizado.

Neste artigo, mostraremos como usar RxJS para construir aplicativos da web que são realmente fáceis de gerenciar e funcionam perfeitamente. Ao final do artigo, você saberá como usar RxJS para gerenciar todos os seus dados e construir aplicativos web ainda maiores e melhores!

Por que RxJS para gerenciamento de estado?

Ei, você já ficou confuso quando está construindo um grande aplicativo da web e tem muitas informações diferentes para controlar? É aí que entra o RxJS! É como uma biblioteca muito legal que ajuda você a gerenciar todos os seus dados em um só lugar.

Com o RxJS, você pode criar fluxos de dados que diferentes partes do seu aplicativo podem usar. É como se um rio fluisse pelo seu aplicativo, mantendo tudo conectado e sincronizado.

RxJS também ajuda você a dividir seu aplicativo em partes menores, o que é como ter cômodos diferentes em sua casa para coisas diferentes. Dessa forma, fica mais fácil manter tudo organizado e encontrar o que você precisa.

No geral, RxJS é uma ótima ferramenta para gerenciar dados em grandes aplicativos da web. Esteja você criando um aplicativo simples ou realmente grande, o RxJS pode ajudá-lo a manter tudo sob controle!

Um exemplo de lista de tarefas

A maneira mais fácil de aplicar uma nova tecnologia ou uma nova prova de conceito é fazer uma lista de tarefas.

A loja:

const subject = new Subject();

const initialState: Task[] = [];

let state = initialState;

export const todoStore = {
  init: () => {
    subject.next(state);
  },
  subscribe: (setState: any) => {
    subject.subscribe(setState);
  },
  addTask: (content: string) => {
    const task = {
      content,
      id: uid(),
      isDone: false,
    };
    state = [...state, task];
    subject.next(state);
  },
  removeTask: (id: string) => {
    const tasks = state.filter((task) => task.id !== id);
    state = tasks;
    subject.next(state);
  },
  completeTask: (id: string) => {
    const tasks = state.map((task) => {
      if (task.id === id) {
        task.isDone = !task.isDone;
      }
      return task;
    });
    state = tasks;
    subject.next(state);
  },
  initialState,
};

Este código define um armazenamento simples para gerenciar uma lista de tarefas usando RxJS. A loja é implementada usando um Assunto e fornece métodos para adicionar, remover e concluir tarefas.

A função init inicializa o armazenamento publicando o estado atual para o assunto usando subject.next(state). Essa função normalmente é chamada quando o aplicativo é carregado pela primeira vez para garantir que a loja esteja atualizada.

A função de assinatura permite que os componentes assinem alterações na loja. Quando o armazenamento for atualizado, a função setState passada para subscribe será chamada com o estado atualizado. Esta função normalmente é usada por componentes que precisam exibir o estado atual da loja.

No geral, init e subscribe são duas funções importantes neste código que permitem aos desenvolvedores gerenciar o estado de uma lista de tarefas usando RxJS.

Uso:

É muito fácil implementar esse tipo de gerenciamento de estado, basta fazer este no nível mais alto:

const [tasks, setTasks] = useState([]);

  useEffect(() => {
    todoStore.subscribe(setTasks);
    todoStore.init();
  });

Este código usa ganchos React para assinar e inicializar uma loja que gerencia uma lista de tarefas usando RxJS.

O gancho useState cria uma variável de estado chamada tarefas e uma função chamada setTasks para atualizar esse estado. O argumento [] passado para useState define o valor inicial das tarefas como um array vazio.

O gancho useEffect é usado para assinar e inicializar o todoStore. A linha todoStore.subscribe(setTasks) assina a função setTasks para alterações na loja. Isso significa que sempre que a loja for atualizada, setTasks será chamado com o estado atualizado e as tarefas serão atualizadas de acordo.

A função todoStore.init() inicializa a loja publicando o estado atual para o assunto usando subject.next(state).

Conclusão

Então é isso! Aprendemos como usar RxJS e React para construir um aplicativo de lista de tarefas. Usamos RxJS para gerenciar o estado do aplicativo e React para exibir o estado atual ao usuário.

Vimos como o RxJS fornece um conjunto poderoso de ferramentas para gerenciamento de estado, incluindo observáveis, operadores e assuntos. E também aprendemos como usar ganchos React como useState e useEffect para atualizar o estado do aplicativo em tempo real.

Usando RxJS e React juntos, criamos um aplicativo interessante que é fácil de usar e manter. E aprendemos algumas habilidades realmente valiosas que podemos usar para construir aplicativos da web ainda mais incríveis no futuro!

Se você acha que o artigo é muito obscuro, dê uma olhada:

• Código fonte: https://github.com/starneit/rxjs-state-poc
• Demonstração: https://rxjs-poc.web.app/