[Docs Rewrite] Meta-Issue: Rewrite Examples

[markerikson]

This is a tracking issue to cover all tasks related to rewriting our existing example projects.

Tasks

• [ ] Decide which examples can be removed (like todos vs todomvc vs todos-flow)
• [ ] Rewrite remaining examples with Redux Toolkit and React-Redux hooks

[zpwebbear]

@markerikson I think I could help to rewrite some examples, but I need to know how fast they must be rewritten.

[giacomocerquone]

@markerikson Hi, quick question: for the first task of deciding which examples can be removed, you wanna decide between all the examples or just between the three you mentioned or between the similar ones?

Anyway:

• I don't see why the tree-view example should be there. Was it for showcasing performances with a large structure inside redux? If that was the use case, we would be better off benchmarking stuff. At the same time, I don't think it could be of any help showcasing the usage of it though... basically, I wouldn't keep it.
• In todos-flow I like the idea of demonstrating how to correctly type a redux project, but I'd use typescript instead
• todomvc: I think I'm completely missing the point on why this example exists at all. What is it for? What does it showcase? Because I don't really see how the MVC pattern applies in that folder, plus we're in an MVVM library (or whatever React is), so why should we showcase the usage of the MVC pattern with redux?
• the async project might be deleted in favour of refactoring the real-world example where some async computation is mandatory

Ultimately, I think that all the other examples are ok to keep!

As of now I'm about to refactor the counter example, count me on 😃

[markerikson]

@giacomocerquone I think it's worth reviewing all the examples, deciding what the original intended purpose was, and then deciding what the overlap is and what should be removed.

I do actually think the tree-view example is useful - this was a big question early on in the life of Redux about "do I just connect the top component, or multiple components?", and it shows components extracting items from the store based on ID as well as recursive rendering. Someone over in Reactiflux was actually trying to port that to hooks as a learning exercise yesterday, which is what prompted me to file this issue.

todomvc is a slightly larger version of todos. This was more relevant when the TodoMVC project was being widely used as a comparison between varying UI frameworks, and it at least looks nicer than the barebones todos project, but tbh it can probably be removed.

Haven't looked at async lately, but yes, it can probably be removed.

I would honestly just go replace counter with the contents of our Redux+JS template for Create-React-App:

https://github.com/reduxjs/cra-template-redux

Flow is dead, effectively. I would delete that one.

On the other hand, I would consider having a counter-ts example that copy-pastes the Redux+TS template for CRA. We ought to at have least one TS-based example in there somewhere.

The other thing to consider is that I've built out a larger real-world-ish app as the example for the "Essentials" tutorial, here:

https://github.com/reduxjs/redux-essentials-example-app

and this TodoMVC-based app for the "Fundamentals" tutorial:

https://github.com/reduxjs/redux-fundamentals-example-app

We're going to keep those repos because I want them to be independently cloneable so people can try out the projects themselves, but we should probably either link to them on the "Examples" docs page, or copy-paste the final versions of the code into projects in the /examples folder.

@zpwebbear : No particular timeline for this. It's just something that crossed my mind yesterday as a thing that needs to be done at some point.

[giacomocerquone]

@markerikson

All clear, tbh don't like the idea of copying stuff though. For the counter example it's ok I suppose, but for everything else that might have even just a few changes in time, I'd leave a link so that they don't have to be synced every time.

So I'm about to prepare a PR for:

• the deletion of the todomvc and the async examples
• the replacement of the counter example with the cra-template-redux
• adding the links of the fundamentals and the redux essentials example (still don't understand why we should call them MVC examples...)

[giacomocerquone]

Actually instead of linking the stuff, we could also copy the redux-fundamentals-example-app repo inside the example repo, but I've never experimented with this kind of configuration

[nickserv]

You mean like a git submodule or subtree?

[giacomocerquone]

You mean like a git submodule or subtree?

yes, or even simpler, symlinks: https://stackoverflow.com/a/4660048/2809729

[nickserv]

I don't think you can symlink across repositories, unless you require users always clone both repositories in the same place relatively, but they that would probably break on GitHub. GitHub supports submodules, though I'm not sure about subtrees as they're newer.

[giacomocerquone]

@nickmccurdy clear enough for me. Let's just link them in the README, once some contributor, or directly mark, will have tested this solution (if he likes it) we will change it!

[meesvandongen]

I'm working on real-world

[timdorr]

This is made redundant by #3565. I would still like to move the examples out of this repo, as they add a ton of weight to the test process and a lot of noise to the git history.

[markerikson]

I'd forgotten that that PR existed.

Biggest issue is that there are external links pointing to those folders. At a bare minimum, we would need to replace all of those folders' contents with a README that points to the new location.

[timdorr]

We can submodule it.

[zpwebbear]

@markerikson I would prefer to rewrite the shopping-cart. Do I need to use typescript to show the whole might of RTK? Do I need to create the PR at the very beginning of work to be able to see the process of rewriting, or we just will replace the example folder with the single commit from PR when work will be done?

[giacomocerquone]

I didn't write it, but apart from the #3919 which is reorganizing the whole examples folder (and I still don't know if it will have to be closed), I'd like to refactor the "todos"

[markerikson]

Well, clearly this effort stalled and went nowhere. We had a couple PRs filed, like #3922, but tbh I never got around to looking at it.

I'd really like to clean up the examples folder, nuke some dead examples, and update any others to show RTK.

I noticed we don't even have a TS CodeSandbox on the "TS Getting Started" page. I'm going to update all the example READMEs right now to say "this is outdated", replace the existing counter with our current CRA+JS template, and add a counter-ts example with our current CRA+TS template, so I can add a CSB embed of the CRA+TS example.

From there... honestly I have no great attachment to CRA at this point and I'm also open to converting them to Vite or something :) But more than that I want examples that show RTK, not legacy Redux.

Anyone want to help redo the examples (basically from scratch)?

[mbaneshi]

Hello dear contributor , I would like to contribute in this repo , specially this issue , would you please guide me , or at least assign me some task , to start help . Thank you in advance

[meesvandongen]

It might be an idea to set up sandpack so the code sandbox examples can stay in the documentation repository as single source of truth

[markerikson]

We don't actually need Sandpack - CSB can be pointed to a folder in the repo directly, and that's what we already do for both the Redux and RTK docs:

<iframe class="codesandbox"
  src="https://codesandbox.io/embed/github/reduxjs/redux/tree/master/examples/counter/?runonclick=1"
  sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
></iframe>