Docs misleading on how to progress from Basics: Data Flow tutorial to Usage with React tutorial

[digitalmacgyver]

Currently the Basics tutorial in the docs walks you through creating some actions, reducers, and a store for a todo app.

Then at the end of the tutorial at http://redux.js.org/docs/basics/DataFlow.html# it says:

"Now that you know how Redux works, let's connect it to a React app."

This strongly implies you will be extending the files you have developed in the Basics tutorial with React.

In fact, during the Usage With React tutorial you completely reimplement the actions and reducers, in different files, with substantially different style / syntax.

None of the files you use during the Basics tutorial should be used in the Usage with React tutorial.

Worse - if you attempt to continue to follow along you end up with a broken react/redux app that doesn't function properly because of the two implementations of the reducers and an unfortunate name collision between import files.

The Usage With React tutorial has its entry point in:

./index.js

And its reducer code in:

./reducers/index.js

And imports the todoApp into index.js with:

import todoApp from './reducers';

Which is supposed to find ./reducers/index.js

If someone has been following along in the tutorial, they will have a:

./reducers.js

file in the root directory here that also defines a todoApp, and the import line in index.js will get the version of todoApp from reducers.js, not ./reducers/index.js.

This file will have not-completely-incorrect code, things are not totally broken, rather the resulting app has some working functionality (adding todos, filtering on active filter), and some broken functionality (clicking on todos to change their active filter).

The beginner trying to follow the docs is left with the impression that they have some inscrutable error in their code.

[markerikson]

Hmm. Interesting. If you'd like to submit a PR that improves the examples to be more consistent, we could definitely work to get that in!

[ViggoV]

I had the same problem. After following the basics tutorial (or what appeared to be that) I got a few error messages so I went on to the 'complete source code' which to my surprise looked quite different (and contained additional code) than the early parts of the tutorial.

Furthermore the tutorial tends to not tell where it expects you to put (and what to name) a given file until the source code recap at the very bottom of the page, which leads to a lot of redundant scrolling.

[keepitreal]

Did this get solved? It appears so from the current docs. I started working on PR for it but upon looking at https://github.com/reactjs/redux/blob/master/docs/basics/UsageWithReact.md it seems the imports have been fixed.

I did start working on some of the things @ViggoV brought up so if we think that is worth addressing then I'll keep my work going.

[ViggoV]

Well it still seems a little confusing as to whether or not it is a continuation of the previous tutorial, since both produce almost identical todo-apps. It is never explicitly stated that this is a separate tutorial and in my experience it leaves the impression that this is indeed a continuation. Maybe you could just add a statement after the line “We will use React to build our simple todo app” stating that this is a separate but similar project to the previous tutorial. Thanks for the response and keep up the good work :) — Victor Eg Frølund vefr86@gmail.com +45 29860143

…

On 7. dec. 2016 14.32 +0100, Darion Welch ***@***.***>, wrote: Did this get solved? It appears so from the current docs. I started working on PR for it but upon looking at https://github.com/reactjs/redux/blob/master/docs/basics/UsageWithReact.md it seems the imports have been fixed. I did start working on some of the things @ViggoV brought up so if we think that is worth addressing then I'll keep my work going. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[keepitreal]

@ViggoV I've gone back through the basic tutorial and don't see what you're talking about. @digitalmacgyver 's original post said that reducers and actions are reimplemented in the 'Usage with React' section instead of continuing from the previous sections. From what I can tell this has been fixed, as have the file paths for actions/reducers imported into the containers and component files.

Please go back through the Usage With React section and let me know if you're seeing the same thing I am. I've put in some improvements to the Reducers page that should help new readers not have to scroll the finished implementation as much, so I can submit a PR for that fix. But for the OP's problem I think that has been resolved silently.

[ViggoV]

Oh, I see.. I thought you were going for a split solution and completely seperate the two! Well, your solution is better, so I tip my hat.. :)

…

Den 7. dec. 2016 kl. 19.06 skrev Darion Welch ***@***.***>: I've gone back through the basic tutorial and don't see what you're talking about. @digitalmacgyver 's original post said that reducers and actions are reimplemented in the 'Usage with React' section instead of continuing from the previous sections. From what I can tell this has been fixed, as have the file paths from the containers and component files importing actions and reducers from those files. Please go back through the (https://github.com/reactjs/redux/blob/master/docs/basics/UsageWithReact.md)[Usage with React] section and let me know if you're seeing the same thing I am. I've put in some improvements to the Reducers page that should help new readers not have to scroll the finished implementation as much, so I can submit a PR for that fix. But for the OP's problem I think that has been resolved silently. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[timdorr]

Closed via #2142