Docs need one or more diagrams #653

Closed
wmertens opened this Issue Aug 29, 2015 · 25 comments

Comments

@wmertens
Contributor

wmertens commented Aug 29, 2015

There is no diagram explaining the flow in Redux.

I had some success explaining it with this diagram:
redux flow

I'd be happy to provide this in png or svg, with any changes you would like.

@Johnius

This comment has been minimized.

Show comment
Hide comment
@Johnius

Johnius Aug 29, 2015

Awesome! Thank you!

Johnius commented Aug 29, 2015

Awesome! Thank you!

@edge

This comment has been minimized.

Show comment
Hide comment
@edge

edge Aug 29, 2015

Contributor

I like your diagram, but the shadows and gradients feel a little gaudy. Maybe you could use solid colors instead?

/2cents

Contributor

edge commented Aug 29, 2015

I like your diagram, but the shadows and gradients feel a little gaudy. Maybe you could use solid colors instead?

/2cents

@Johnius

This comment has been minimized.

Show comment
Hide comment
@Johnius

Johnius Aug 30, 2015

What is selector?

Johnius commented Aug 30, 2015

What is selector?

@edge

This comment has been minimized.

Show comment
Hide comment
@edge

edge Aug 30, 2015

Contributor

@Johnius It's what the Connnector uses to make the state more specific and cache the previous value.

Contributor

edge commented Aug 30, 2015

@Johnius It's what the Connnector uses to make the state more specific and cache the previous value.

@Johnius

This comment has been minimized.

Show comment
Hide comment
@Johnius

Johnius Aug 30, 2015

@edge It's a connect() function? I didn't remember the caching possibility in there. Or it's a library?

Johnius commented Aug 30, 2015

@edge It's a connect() function? I didn't remember the caching possibility in there. Or it's a library?

@edge

This comment has been minimized.

Show comment
Hide comment
@edge

edge Aug 30, 2015

Contributor

@Johnius It doesn't cache by itself, but React does. It implements shouldComponentUpdate by using the old props and doing a shallow equality check on the new props, essentially doing a cache check.

Contributor

edge commented Aug 30, 2015

@Johnius It doesn't cache by itself, but React does. It implements shouldComponentUpdate by using the old props and doing a shallow equality check on the new props, essentially doing a cache check.

@timdorr timdorr added the docs label Aug 30, 2015

@wmertens

This comment has been minimized.

Show comment
Hide comment
@svnlto

This comment has been minimized.

Show comment
Hide comment
@svnlto

svnlto Sep 16, 2015

I found this one quite helpful. no mention of selectors however.
Redux Diagram

svnlto commented Sep 16, 2015

I found this one quite helpful. no mention of selectors however.
Redux Diagram

@peteruithoven

This comment has been minimized.

Show comment
Hide comment
@Sigmus

This comment has been minimized.

Show comment
Hide comment
@Sigmus

Sigmus Dec 30, 2015

The above diagram for convenience:

image

Sigmus commented Dec 30, 2015

The above diagram for convenience:

image

@thongly

This comment has been minimized.

Show comment
Hide comment
@thongly

thongly Jan 10, 2016

Awesome diagrams! Perhaps a flux vs redux diagram would be helpful in explaining the differences between the two as well - and how the presentation components (react) are still entirely separate. Perhaps this belongs in the early parts of the motivation docs, @gaearon

thongly commented Jan 10, 2016

Awesome diagrams! Perhaps a flux vs redux diagram would be helpful in explaining the differences between the two as well - and how the presentation components (react) are still entirely separate. Perhaps this belongs in the early parts of the motivation docs, @gaearon

@henriquesosa

This comment has been minimized.

Show comment
Hide comment
@henriquesosa

henriquesosa Jan 26, 2016

@thongly I'm working in a draft to represent both flux and redux architecture.

@thongly I'm working in a draft to represent both flux and redux architecture.

@Lassi

This comment has been minimized.

Show comment
Hide comment
@Lassi

Lassi Jan 26, 2016

You can find diagrams representing Flux/Redux and other unidirectional data flow architectures here

Lassi commented Jan 26, 2016

You can find diagrams representing Flux/Redux and other unidirectional data flow architectures here

@gaearon

This comment has been minimized.

Show comment
Hide comment
@adamdonahue

This comment has been minimized.

Show comment
Hide comment
@adamdonahue

adamdonahue Apr 14, 2016

This diagram gives the impression that only the action type is passed to the dispatcher, rather than the action.

Adam

On Apr 13, 2016, at 2:15 PM, Dan Abramov notifications@github.com wrote:

Courtesy of http://makeitopen.com/tutorials/building-the-f8-app/data/:


You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub

This diagram gives the impression that only the action type is passed to the dispatcher, rather than the action.

Adam

On Apr 13, 2016, at 2:15 PM, Dan Abramov notifications@github.com wrote:

Courtesy of http://makeitopen.com/tutorials/building-the-f8-app/data/:


You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub

@wmertens

This comment has been minimized.

Show comment
Hide comment
@wmertens

wmertens Apr 16, 2016

Contributor

I like the f8 one, it only has three main components but shows there is more going on.

Contributor

wmertens commented Apr 16, 2016

I like the f8 one, it only has three main components but shows there is more going on.

@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon May 4, 2016

Collaborator

Also these are really nice (from http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/):

Basic Flow

Side Effects

Side Effects with API Middleware

Collaborator

gaearon commented May 4, 2016

Also these are really nice (from http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/):

Basic Flow

Side Effects

Side Effects with API Middleware

@aweary

This comment has been minimized.

Show comment
Hide comment
@aweary

aweary May 4, 2016

Contributor

@gaearon I like those, with the exception of the "Dispatcher" which AFAIK doesn't exist in Redux and kind of confuses it with Flux.

Contributor

aweary commented May 4, 2016

@gaearon I like those, with the exception of the "Dispatcher" which AFAIK doesn't exist in Redux and kind of confuses it with Flux.

@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon May 6, 2016

Collaborator

Yeah, it probably should’ve been “Dispatch Function”.

Collaborator

gaearon commented May 6, 2016

Yeah, it probably should’ve been “Dispatch Function”.

@markerikson markerikson referenced this issue Jun 6, 2016

Closed

FAQ updates #1785

@josefbetancourt

This comment has been minimized.

Show comment
Hide comment
@josefbetancourt

josefbetancourt Aug 14, 2016

The diagram found here would fit in perfectly in a "counter" tutorial: http://kenev.net/2015/09/06/redux-counter-sample-diagram/

Approach: The diagram is built in conjunction with the prose.

josefbetancourt commented Aug 14, 2016

The diagram found here would fit in perfectly in a "counter" tutorial: http://kenev.net/2015/09/06/redux-counter-sample-diagram/

Approach: The diagram is built in conjunction with the prose.

@timdorr

This comment has been minimized.

Show comment
Hide comment
@timdorr

timdorr Sep 4, 2016

Member

Rolling up into #1785 for now. Please keep an PRs with diagrams coming!

Member

timdorr commented Sep 4, 2016

Rolling up into #1785 for now. Please keep an PRs with diagrams coming!

@timdorr timdorr closed this Sep 4, 2016

@reduxjs reduxjs deleted a comment from xgqfrms-GitHub Jul 3, 2017

@reduxjs reduxjs deleted a comment from xgqfrms-GitHub Jul 3, 2017

@reduxjs reduxjs deleted a comment from xgqfrms-GitHub Jul 6, 2017

@reduxjs reduxjs deleted a comment from imvetri Jul 6, 2017

@noscripter

This comment has been minimized.

Show comment
Hide comment

noscripter commented Aug 24, 2017

@markerikson

This comment has been minimized.

Show comment
Hide comment
@markerikson

markerikson Nov 26, 2017

Contributor

I really like this diagram:

Found in this article: http://codesheep.io/2017/01/06/redux-architecture/

Contributor

markerikson commented Nov 26, 2017

I really like this diagram:

Found in this article: http://codesheep.io/2017/01/06/redux-architecture/

@markerikson markerikson referenced this issue Feb 24, 2018

Open

FAQ Updates, Part 2: Electric Boogaloo #2854

3 of 3 tasks complete
@yadielar

This comment has been minimized.

Show comment
Hide comment
@yadielar

yadielar Feb 25, 2018

Here's a diagram I made inspired by the one @gaearon shared from @terpiljenya slides.

redux-diagram__1300x1434

yadielar commented Feb 25, 2018

Here's a diagram I made inspired by the one @gaearon shared from @terpiljenya slides.

redux-diagram__1300x1434

@victorvhpg

This comment has been minimized.

Show comment
Hide comment
@victorvhpg

victorvhpg Apr 9, 2018

my simple diagram:
Redux

my simple diagram:
Redux

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment