Docs need one or more diagrams

[wmertens]

There is no diagram explaining the flow in Redux.

I had some success explaining it with this diagram:

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

[Johnius]

Awesome! Thank you!

[alkhe]

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

/2cents

[Johnius]

What is selector?

[alkhe]

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

[Johnius]

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

[alkhe]

@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.

[wmertens]

Science agrees that visuals are important: https://blog.slideshare.net/2015/08/31/the-scientific-reason-why-bullets-are-bad-for-presentations/

[svnlto]

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

[peteruithoven]

Another diagram https://voice.kadira.io/rethinking-redux-f1e96daba60c#.9zs9rp0vf

[Sigmus]

The above diagram for convenience:

[thongly]

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]

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

[Lassi]

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

[gaearon]

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

[adamdonahue]

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 [email protected] 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]

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

[gaearon]

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]

@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]

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

[josefbetancourt]

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

Image not found. archive: https://web.archive.org/web/20160805065602/http://kenev.net/images/2015/09/redux-counter.png
Article archive: https://web.archive.org/web/20161005091221/http://kenev.net/2015/09/06/redux-counter-sample-diagram

The diagram is built in conjunction with the prose.

[timdorr]

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

[markerikson]

I really like this diagram:

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

[yadielar]

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

[victorvhpg]

my simple diagram:

[havesomeleeway]

A high-level overview of how state can be mutated in redux. This screenshot is from a Udemy course by Stephen Grider

If you are interested in reading more about state mutation in redux:
https://redux.js.org/recipes/structuring-reducers/immutable-update-patterns

If you're interested in his course:
https://www.udemy.com/react-redux/

[xgqfrms]

I'm looking forward the official data-flow diagram...

just like vuex did.

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

[stg101]

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

Hello, I like your graphics. How you have made them?

[imvetri]

@gaearon I really like the animation, which tool did you use ?

[xgqfrms]

@imvetri I think Microsoft PowerPoint animation is enough do that!

demo

the ppt file of demo

[i-mw]

Ok.. my turn ..
Created it off flux flow diagram..

[renelink]

@gaearon I really like the animation, which tool did you use ?

I was also interessted in the tool that @stg101 used but had no success to find a good one and Power Point is a bit weird.

Thus I did it with pure SVG. No fancy editor needed. Take a look at https://codepen.io/rene-link/pen/LYLYVVR

[markerikson]

FWIW, I did both of the new animated diagrams in the Redux tutorials using PowerPoint:

• https://redux.js.org/tutorials/essentials/part-1-overview-concepts#redux-application-data-flow
• https://redux.js.org/tutorials/essentials/part-5-async-logic#using-middleware-to-enable-async-logic