Redux: Docs need one or more diagrams

Awesome! Thank you!

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

/2cents

What is selector?

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

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

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

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

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

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

The above diagram for convenience:

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 I'm working in a draft to represent both flux and redux architecture.

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

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

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

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

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

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

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

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.

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

I really like this diagram:

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

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

my simple diagram:

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/

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

just like vuex did.

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

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?

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

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

demo

the ppt file of demo

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