About the chapter "Usage with React" in the Official-Documentation.
Zhixing Han
I really agree with the table about the differences between Presentational & Container components.
Especially the decoupling reasons.
But the example codes out there seems like leading bad practices, markup tags apear in the container component(connecting logic).
JSX codes are obviously about "How things look". (Whether we now added styles to them or not, they may be styled one day in the feature, who knows?)
Why not place the "form jsx" in a "'Presentational Component", and connect the dispatch(addTodo(input.value)) to a prop like "onSubmitForm"?
// containers/AddTodo.js
connect(
undeinfed,
{
onFormSubmit: (text) => {
dispatch(addToto(text));
}
}
)(NewTodoForm)
onFormSubmit is action about what happened in the UI layer, UI layer only knows about actions like onClick, onDrag, onHover, onClickSubmitBtn, onClickCancelBtn, onFocusTitleInput....., and the UI layer should not know about Redux's dispatch(), or about how entities are being manipulated.(insert,replace,update,remove)
