Update "Usage with React"

[gaearon]

This builds on top of #1186 with some changes I wanted to make to the wording and structure. "Usage with React" looks done to me (although improvements are welcome!)

Right now I really want somebody to contribute a few things here:

• @pedrottimark (Done!) Update https://github.com/rackt/redux/blob/___react-docs-update/docs/basics/ExampleTodoList.md to match the source code from the new "Usage with React"
• @jakegardner Update https://github.com/rackt/redux/blob/___react-docs-update/docs/recipes/ComputingDerivedData.md to match the new example (should be just a few tweaks, e.g. it should feature VisibleTodoList rather than App component)
• @gaearon Update https://github.com/rackt/redux/tree/___react-docs-update/examples/todos-with-undo to also match that source code (except for the undo part, obviously)
• @gaearon Update https://github.com/rackt/redux/blob/___react-docs-update/docs/recipes/ImplementingUndoHistory.md to match the new todos-with-undo example

Help greatly appreciated because I'm busy but I really really want to ship this.
Please post in this thread if you'd like to take some part of this work.

[gaearon]

cc @omnidan who owns todos-with-undo, maybe you've got some time to help?

[pedrottimark]

I will go for the first bullet point: basics/ExampleTodoList.md

[gaearon]

To make it super clear, the new "Usage with React" is here:
https://github.com/rackt/redux/blob/___react-docs-update/docs/basics/UsageWithReact.md

[badnorseman]

@gaearon @pedrottimark Perhaps this can be helpful. It is the source code used for the update to Usage with React. I didn't include tests, otherwise the code is complete.

[pedrottimark]

@urbanvikingr Do you think it would be more efficient and less risk of error for you to do it? No offense taken, if you have time and want to.

[gaearon]

Note there were mixed code styles in previous PR. I tried to amend those to match our code style enforced by the linter.

[pedrottimark]

@gaearon So the goal is on ___react-docs-update branch: copy each chunk of code from UsageWithReact.md paste it where it goes in the order of ExampleTodoList.md but leave all other code there which is not in the intersection unchanged (for example, Action Creators and Constants).

[pedrottimark]

@gaearon Hopefully the Pooh Bear brain of a hybrid writer-designer-developer doesn’t drive you crazy.

1. In Usage, the Presentational Components have two different orders.
   It might help smooth things out if the order under Implementing Components changes to become consistent with the order previously established under Designing Component Hierarchy: TodoList, Todo, Link, Footer, App.
   If you agree, should I include that in the pull request?
2. What do you think if the major and minor order of source for the components in the lower half of Examples becomes parallel with Usage?
   That is, Presentational Components, Container Components, Other Components
   Specific minor order depends on answer to preceding question.

[gaearon]

So the goal is on ___react-docs-update branch: copy each chunk of code from UsageWithReact.md paste it where it goes in the order of ExampleTodoList.md but leave all other code there which is not in the intersection unchanged (for example, Action Creators and Constants).

For the rest of the code, use code from https://github.com/urbanvikingr/todo/. It's based on my Egghead tutorials.

It might help smooth things out if the order under Implementing Components changes to become consistent with the order previously established under Designing Component Hierarchy: TodoList, Todo, Link, Footer, App.

I agree order should be consistent. We should strive to maintain “first declared, then used” order. So Todo should be before TodoList.

[gaearon]

What do you think if the major and minor order of source for the components in the lower half of Examples becomes parallel with Usage?

Yes, order everywhere should be consistent. Thanks for helping!

[pedrottimark]

@gaearon Thank you as always for your patience to explain. Super, I will use “first declared, then used” order as the guiding principle when there is an inconsistency. Am keeping notes as other little things come up to ask as a batch tomorrow.

[gaearon]

👍

[gaearon]

@pedrottimark

I gave you the commit bit so please feel free to edit the branch right as part of this PR. I'd like if you could flush your temporary progress so we have some shared bits others could use for the rest of the bullet points.

[badnorseman]

@pedrottimark I can update source code for ToDo this weekend.

[jakegardner]

I'll take the second bullet: recipes/ComputingDerivedData.md

[gaearon]

@jakegardner Thank you!

[gaearon]

I'd imagine something like this: (pardon the renames)

import { getVisibleTodos } from '../selectors'

const mapStateToProps = (state) => {
  return {
    todos: getVisibleTodos(state)
  }
}
...
const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

I don't see the value in *selector suffix.

[jakegardner]

I agree terse names are better, but then it would be the same as the non-memoized version. What do you suggest?

Maybe I'm missing something. The output of createSelector() is a function that returns the memoized state. In the previous version of this document, that output was mapped as props to the child components of App. Now that we're doing the filtering in VisibleTodoList without a render method, I'm not sure how to map the output of createSelector() (via visibleTodosSelector) to child props.

[gaearon]

Doesn't my example show how? Call selector from mapStateToProps. I think :-)

[jakegardner]

Ok, I was trying to not modify the selector definition. But as you wish :-)

Have a look: #1295

[badnorseman]

Found a bug #1332

[badnorseman]

@gaearon I'm updating todomvc example first. Already updated the source code, just need to complete tests. Check #1334 for progress.

[badnorseman]

@gaearon I suggest that I rename todomvc example to todos. When I update the todos-with-undo example, I will use the same file structure as in the todos example. Agree?

[gaearon]

The problem is that todomvc has more "stuff" than todos-with-undo. But I agree it's weird they are so different. Do as you think is best, and I'll take a look later!

[badnorseman]

OK, I'm going to rename todomvc to todos and fix the tests. Then we can decide whether to add additional functionality or not. Right now, I think that we need to align examples with documentation, so newcomers can follow.

[badnorseman]

Decided to keep the todomvc example and add todos. I could use some help with unit test of components and containers in the todos example.

[gaearon]

@urbanvikingr Where can I find the latest version you were working on?

[badnorseman]

bug in doc #1332
todos #1334 (just saw that it now has merge conflicts)

Perhaps we can merge doc updates?

[gaearon]

@urbanvikingr I’ll take care of merge conflicts, thanks. Let me take some time and I’ll merge todos in this PR.

[badnorseman]

@gaearon Awesome. Thanks. Then todos are merged, I will update doc references from todomvc to todos. Perhaps this weekend, I have time to look into unit testing of components and containers.

[gaearon]

Thanks to everyone involved! This is up: http://redux.js.org/docs/basics/UsageWithReact.html