Comparação entre BLoC, ScopedModel e Redux - Parte I

BLoC , ScopedModel , Redux … diferenças, quando usar, quando NÃO deve ser usado, vantagens, desvantagens…

O que são?

Para entender melhor as diferenças, acho que pode ser útil lembrar rapidamente seus principais princípios.

Redux

Introdução

Redux é uma estrutura de gerenciamento de estado de aplicativos . Em outras palavras, seu objetivo principal é administrar um Estado .

O Redux é arquitetado em torno dos seguintes princípios:

  • Fluxo de dados unidirecional;

  • Um Storefunciona como o orquestrador do Redux:

    • armazena apenas um estado;
    • expõe um ponto de entrada, chamado dispatch que aceita apenas Ações em argumentos;
    • expõe um getter para buscar o estado atual;
    • permite (não) registrar-se para ser notificado (via StreamSubscription ) de quaisquer alterações aplicadas ao Estado;
    • despacha as ações e a store para o primeiro MiddleWare (logo abaixo tem a explicação);
    • despacha as ações e o estado atual para um Reducer (que pode ser uma fachada para vários redutores)
  • Ações

    Ações são os únicos tipos de entrada aceitos pelo ponto de acesso da StoreAs ações , combinadas com o estado atual , são usadas pelo Middleware (s) e pelo Reducer para processar alguma função, o que poderia levar a uma alteração do Estado .

    Ações descrevem apenas o que aconteceu.

  • MiddleWare

    Um Middleware é uma função comumente destinada a executar de forma assíncrona (mas não necessariamente), com base em uma ação. Um Middlewares implesmente usa um estado (ou uma ação como um gatilho), mas não altera o estado .

  • Reducers

    Um Redutor é normalmente uma função síncrona que faz algum processamento baseado na combinação Ação - Estado . O resultado do processamento pode levar a um novo Estado
    redutor é o único autorizado a mudar o estado .

É importante observar que, de acordo com as recomendações e boas práticas do Redux, existe apenas uma única store por aplicativo. Para dividir a lógica de tratamento de dados, é aconselhável usar ' reducer composition ' em vez de muitas stores.

Como funciona?

A animação a seguir mostra como o Redux funciona:

 

Explicação:

  • Quando algo acontece no nível da interface do usuário (mas não limitado à interface do usuário, na verdade), uma ação é criada e enviada para o armazenamento (via store.dispatch (ação));
  • Se um ou vários Middlewares são configurados, eles são invocados em sequência, passando-lhes a ação e uma referência para o armazenamento (assim, também o estado, indiretamente );
  • Middlewares poderiam enviar uma ação para a store durante o processamento;
  • Em seguida, a ação e o estado atual também são enviados ao redutor;
  • Reducer é o único que potencialmente mudará o Estado;
  • Quando o Estado é alterado, a Store notifica todos os ouvintes registrados para informá-los.
  • A interface do usuário (mas não limitada à interface do usuário) pode, então, executar ações apropriadas vinculadas à alteração de estado .

Implementações

O Redux foi inicialmente desenvolvido para Javascript e portado para o Dart como um pacote .

Um pacote dedicado Flutter (flutter_redux) fornece alguns Widgets, como:

  • StoreProvider para passar a store para todos os widgets descendentes;
  • StoreBuilder para obter o armazenamento de um StoreProvider e passá-lo para uma função de construtor Widget;
  • StoreConnector para obter o Store do ancestral StoreProvider mais próximo, convertê-lo em um ViewModel e passá-lo para uma função de construtor.

Em breve, iremos dar continuidade...

423 Visualizações
Awesome Flutter