Redux: Documentos precisam de um ou mais diagramas

Criado em 29 ago. 2015  ·  30Comentários  ·  Fonte: reduxjs/redux

Não há nenhum diagrama explicando o fluxo no Redux.

Tive algum sucesso explicando com este diagrama:
redux flow

Terei prazer em fornecer isso em png ou svg, com as alterações que você desejar.

docs

Comentários muito úteis

Além disso, esses são realmente bons (de http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/):

Fluxo Básico

Efeitos colaterais

Efeitos colaterais com middleware de API

Todos 30 comentários

Incrível! Obrigado!

Gosto do seu diagrama, mas as sombras e gradientes parecem um pouco berrantes. Talvez você pudesse usar cores sólidas em vez disso?

/ 2 centavos

O que é seletor?

@Johnius É o que o Conector usa para tornar o estado mais específico e armazenar em cache o valor anterior.

@edge É uma função connect() ? Não me lembrava da possibilidade de armazenamento em cache ali. Ou é uma biblioteca?

@Johnius Ele não armazena em cache sozinho, mas o React sim. Ele implementa shouldComponentUpdate usando os adereços antigos e fazendo uma verificação de igualdade superficial nos novos adereços, essencialmente fazendo uma verificação de cache.

Eu achei este bastante útil. nenhuma menção de seletores no entanto.
Redux Diagram

O diagrama acima para sua conveniência:

image

Diagramas incríveis! Talvez um diagrama de fluxo versus redux seja útil para explicar as diferenças entre os dois também - e como os componentes de apresentação (reagem) ainda estão totalmente separados. Talvez isso pertença às partes iniciais dos documentos de motivação, @gaearon

@thongly , estou trabalhando em um rascunho para representar a arquitetura de fluxo e redux.

Você pode encontrar diagramas que representam Flux / Redux e outras arquiteturas de fluxo de dados unidirecionais aqui

Este diagrama dá a impressão de que apenas o tipo de ação é passado para o despachante, ao invés da ação.

Adão

Em 13 de abril de 2016, às 14h15, Dan Abramov [email protected] escreveu:

Cortesia de http://makeitopen.com/tutorials/building-the-f8-app/data/ :

-
Você está recebendo isto porque está inscrito neste tópico.
Responda a este e-mail diretamente ou visualize-o no GitHub

Eu gosto do f8, ele tem apenas três componentes principais, mas mostra que há mais coisas acontecendo.

Além disso, esses são realmente bons (de http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/):

Fluxo Básico

Efeitos colaterais

Efeitos colaterais com middleware de API

@gaearon Eu gosto deles, com exceção do "Dispatcher" que AFAIK não existe no Redux e meio que confunde com o Flux.

Sim, provavelmente deveria ser “Função de despacho”.

O diagrama encontrado aqui se encaixaria perfeitamente em um tutorial de "contador": http://kenev.net/2015/09/06/redux-counter-sample-diagram/

Imagem não encontrada. arquivo: https://web.archive.org/web/20160805065602/http : //kenev.net/images/2015/09/redux-counter.png
Arquivo do artigo: https://web.archive.org/web/20161005091221/http : //kenev.net/2015/09/06/redux-counter-sample-diagram

O diagrama é construído em conjunto com a prosa.

Acumulando em # 1785 por enquanto. Por favor, mantenha um PRs com diagramas chegando!

Eu realmente gosto deste diagrama:

Encontrado neste artigo: http://codesheep.io/2017/01/06/redux-architecture/

Aqui está um diagrama que fiz inspirado no que @gaearon compartilhou de slides @terpiljenya .

redux-diagram__1300x1434

meu diagrama simples:
Redux

screenshot 2018-12-29 at 8 12 48 am

Uma visão geral de alto nível de como o estado pode ser modificado no redux. Esta imagem é de um curso Udemy de Stephen Grider

Se você estiver interessado em ler mais sobre mutação de estado em redux:
https://redux.js.org/recipes/structuring-reducers/immutable-update-patterns

Se você está interessado no curso dele:
https://www.udemy.com/react-redux/

Estou ansioso pelo diagrama de fluxo de dados oficial ...

assim como vuex fez.

image

https://vuex.vuejs.org/
https://vuex.vuejs.org/vuex.png

Além disso, esses são realmente bons (de http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/):

Fluxo Básico

Efeitos colaterais

Efeitos colaterais com middleware de API

Olá, gosto dos seus gráficos. Como você os fez?

@gaearon Gosto muito da animação, qual ferramenta você usou?

@imvetri Acho que a animação do Microsoft PowerPoint é o suficiente para fazer isso!

demo

ppt-animation

o arquivo ppt de demonstração

Ok .. minha vez ..
Criou-o fora do diagrama de fluxo de fluxo.

redux-diagram (1)

Esta página foi útil?
0 / 5 - 0 avaliações