Proposal for a new official example

[DerekCuevas]

TL;DR

I would like to add a variation of this example friend-list to the official examples. The problem is common, and the solution uses redux in ways that the other examples do not, all while remaining pretty simple.

Details

Issue #303 discusses using the store in an observable like way and seems to encourage here the use of store observables. I believe this pattern is really important to redux and should be encouraged. However, I think the docs are missing an example that highlights these features. Currently, there exists no official redux example where more than one listener is bound to the store via store.subscribe(), directly or indirectly (devTools might?).

Therefore, I would like to propose the addition of an official redux example where more than one listener is bound to the store in a meaningful way. I have created a small demo app for this purpose that solves what I think to be a pretty common, less trivial and fitting problem.

The example highlights attaching multiple listeners to store.subscribe() to manage side effect like actions (the user updated a query -> fetch results). As a bonus the example also covers topics such as, using react-router together with redux (* with no third party bindings (such as react-router-redux)), dispatching actions outside of react components, and pushing all other side effects (hitting the API, updating the URL) to action creators.

If this is of interest to anyone, please check out the repo here: friend-list. I have been playing around with multiple solutions to this problem, however I think the part-observable-solution is currently the best one. Also, I would be very interested in seeing some other, better approaches to solve the problem outlined in the repo, specifically one that uses react-router-redux in a significant way (similar to @acdlite's answer here).

I think this issue and example could also relate to #637 (Usage with react-router), it should be made clear (somewhere other than an issue), that using redux together with react-router is fairly trivial (* I believe this is in progress). It might be worth it to have two react-router examples - one with react-router-redux ('real-world') and one without. Finally, because I think this example highlights a practical and common issue I should also reference this issue #1014 (A call for quality articles, examples, and resources).

Let me know what you think about using the part-observable-solution or something similar as an example. I can clean it up and create a PR if accepted.

Thanks everyone for your awesome work.

[djskinner]

Which solution do you think is best now that you have added cycle/motorcycle into the mix?

[DerekCuevas]

You may be well aware of this already, but the Cycle.js and Motorcycle.js solutions do not use redux. However, they are of very high quality and were contributed by members of the core team on both projects, so I merged those solutions in as well. They show a nice contrast between the redux solutions, and the programming models that Cycle.js and Motorcycle.js encourage are interesting and very fitting for the problem of dealing with asynchronous side-effects.

With respect to the redux solutions, I am of the opinion that the redux-saga and better-observable solutions are currently the best two approaches. One solves the problem of asynchronous side-effects with redux-thunk (better-observable) and the other with sagas.

I have a fifth redux solution that I recently contributed to another project which I believe solves the problem nicely as well (it deals with adding loading and error states). Check this out if it is of interest to you.