A call for quality articles, examples, and resources

[gaearon]

We have some in Ecosystem, but too little.
We have some in Awesome Redux, but too many.

What are your favorite Redux articles, examples, and resources? Something that shed a light on a practical issue? Helped Redux “click” for you? Provided you the most value? Why are these resources your favorite ones? What's special about them?

Please share your findings and/or promote your work. 😉
Thank you for your input!

[omnidan]

The code cartoons, of course 😉

• https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6
• https://code-cartoons.com/a-cartoon-guide-to-flux-6157355ab207

Helped Redux “click” for you? Provided you the most value?

The docs 😜

[gaearon]

Excluding the official docs. 📜

[insin]

I found the conventions suggested in Ducks: Redux Reducer Bundles really useful the first time I was working on a project with many reducers which managed distinct sections of state. It helped tame what was about to become an explosion of modules in my project.

[travisperson]

When I first came across Redux I went straight to the documentation and the example code. I had completely skipped over the absolutely amazing Gist in the README. Whenever I tell people to take a look at Redux I point them to two places. First, the gist in the README, second the source code. At ~250 lines it's dead simple and paired with the README gist I don't know if there is much more anyone needs to understand how Redux works. After that your first talk is what got me really excited about how powerful such a simple library really is.

[gaearon]

Very nice high level overview intro:
http://www.youhavetolearncomputers.com/blog/2015/9/15/a-conceptual-overview-of-redux-or-how-i-fell-in-love-with-a-javascript-state-container

[garmjs]

Full-Stack Redux Tutorial http://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html

[quicksnap]

https://github.com/erikras/react-redux-universal-hot-example has been great for a more advanced boilerplate starting point. It moves very quickly, though, and we haven't implemented any real versioning on it.

[batmanimal]

+1 on the teropa tutorial that @armendgashi mentioned.

Also loved this one for understanding the fundamentals: https://github.com/happypoulp/redux-tutorial -- I wrote the "How I Fell in Love with a JS State Container" article, and this really cemented the concepts for me.

I found these tutorials especially useful because the authors explain each step in excruciating detail, and place each step in context of the final application. When I'm learning something new, I feel like every line of code should be beaded with sweat. This is my preference.

[SamLebarbare]

Themes and styles conventions with redux
https://github.com/SamLebarbare/redux-theme

[datoml]

Sometimes it's essential to load reducers on demand.
This helped me a lot. Thanks to @gaearon .
http://stackoverflow.com/questions/32968016/how-to-dynamically-load-reducers-for-code-splitting-in-a-redux-application

Would be awesome to add an example how to load and unload some reducers.

[ipselon]

There are a couple of boilerplates with redux-actions and redux-promise here: http://helmetrex.com

[sotojuan]

I think some culling should be done to Awesome Redux before it becomes too big to be useful (like many Awesome lists). The Examples section is a mess and probably full of outdated, unmaintained, or even poorly written ones. I would argue you only need about 15 examples at most (even that's a stretch). The tutorial list should be looked over too, in case there's outdated ones. Also, the formatting could use some work.

I think the Ecosystem list doesn't have "too little" links. It has more than enough, and adding additional ones should require more than someone linking their project (i.e. there should be some sort of approval).

I am willing to help with the formatting for Awesome Redux, but I don't have enough Redux experience to make decisions on what to keep or delete.

[omnidan]

@sotojuan good idea! please create an issue on the awesome redux tracker for this and link to it here - I think the repo maintainer should know what to remove and what to keep 😄

[gaearon]

@sotojuan

I think the Ecosystem list doesn't have "too little" links. It has more than enough, and adding additional ones should require more than someone linking their project (i.e. there should be some sort of approval).

I vet all links there. 😉 I'm only proposing people to share new stuff so I can review it in case I haven't seen it before!

I think some culling should be done to Awesome Redux before it becomes too big to be useful (like many Awesome lists). The Examples section is a mess and probably full of outdated, unmaintained, or even poorly written ones.

I agree!

@xgrommx What do you think?

It might be a good idea to take a week to over the repos there, select the ones that are up-to-date and show different usage aspects, etc, and have higher quality.

[ChristianHersevoort]

I like this article about server side rendering and redux: https://medium.com/@bananaoomarang/handcrafting-an-isomorphic-redux-application-with-love-40ada4468af4 (not my article)

[fuczak]

If you are open to the idea of including boilerplate starter projects for react-redux apps then apart from https://github.com/erikras/react-redux-universal-hot-example, I highly recommend https://github.com/davezuko/react-redux-starter-kit which is much more focused and straightforward.

[r-park]

👍 for https://github.com/davezuko/react-redux-starter-kit

To be honest nothing I've read has been as illuminating as the official docs and examples. Browsing through the issues has been helpful as well.

[simplesmiler]

Things that helped redux "click" for me:

• Actions are "fire and forget". If you need to do track the "request", initiated by action, then instead of waiting for the action to resolve you should design a "state diagram" of your "request" and implement it in the reducer/actions.
• Instead of writing a reducer and actions for every button and such you can apply the "class/instance" pattern, and carry the "instance id" with the action.
• Instead of writing a reducer and actions for every "view" you can apply the "composition" pattern and compose small things into bigger ones.

[trevordmiller]

Hey @gaearon,

For React testing, I really really like Shallow Rendering. Its nice to not need a DOM - the tests run so fast! - and it forces me to keep my tests modular. There is an egghead.io course of video lessons on it:
https://egghead.io/series/react-testing-cookbook

The course walks through setting up a React testing environment, using the Shallow Render to test component output, and breaking utility modules out into their files to test them separately. It also includes a few lessons on testing Flux/Redux. Some of the lessons are free, some require a subscription. Hope this is helpful :)

[tomkis]

@gaearon I have just published an article explaining why composition matters and how it can help us to better encapsulate our components. http://blog.javascripting.com/2016/02/02/encapsulation-in-redux/

My experience is that inexperienced people often tend to ignore the concept and sometimes simply abuse the global app state, which leads to an unnecessarily complex application logic.

You might consider adding this to Redux docs as a reference to composition.

[sompylasar]

Refs reduxjs/react-redux#278 re: encapsulation.

[gaearon]

This is really great:

http://www.toptal.com/react/react-redux-and-immutablejs

[gaearon]

Great explanation of middleware

http://blog.krawaller.se/posts/exploring-redux-middleware/

[gaearon]

This is a good series:

https://shellmonger.com/2016/02/16/an-introduction-to-react-redux-part-1/

[jobala]

I took Cory House course on React-Redux and es6, made redux click for me.

[timdorr]

We've got a (few!) awesome lists going. I think this is covered now! But please keep the good stuff coming!