We will create an anction creator to manage the dispatch actions, to keep code maintainable and self-documenting by extracting action creators from the components. let nextTodoId = 0; const ACTION_CREATOR = { addTodo: (text) => { return { type: 'ADD_…

In redux, the action type is just a normal string type, it is easy to get naming conflicts in large application. Can use namespace-constants lib to solve the problem: https://npmdaily.com/pkg/namespace-constants import constants from 'namespace-const…

Clean TodoApp Component, it doesn't need to receive any props from the top level component: const TodoApp = () => ( <div> <AddTodo /> <VisibleTodoList /> <Footer /> </div> ); Also we don't need wrap ReactDOM.render() into…

Code to be refactored: const AddTodo = ({ onAddClick }) => { let input; return ( <div> <input ref={node => { input = node; }} /> <button onClick={() => { onAddClick(input.value); input.value = ''; }}> Add Todo </button> &l…

Code to be refacted: const TodoList = ({ todos, onTodoClick }) => ( <ul> {todos.map(todo => <Todo key={todo.id} {...todo} onClick={() => onTodoClick(todo.id)} /> )} </ul> ); let nextTodoId = 0; const TodoApp = ({ todos, visibili…

Learn how to avoid the boilerplate of passing the props down the intermediate components by introducing more container components. Code to be refactored: const FilterLink = ({ filter, currentFilter, children, onClick }) => { if (filter === currentFil…

Finally, I just noticed that the to-do app component doesn't actually have to be a class. I can turn it into a function. I prefer to-do that when possible. Code to be refactored: class TodoApp extends Component { render() { const { todos, visibilityF…

Code to be refactored: let nextTodoId = 0; class TodoApp extends Component { render() { const { todos, visibilityFilter } = this.props; const visibleTodos = getVisibleTodos( todos, visibilityFilter ); return ( <div> <input ref={node => { this.…

The code to be refactored: let nextTodoId = 0; class TodoApp extends Component { render() { const { todos, visibilityFilter } = this.props; const visibleTodos = getVisibleTodos( todos, visibilityFilter ); return ( <div> <input ref={node => { t…

Code to be refactored: let nextTodoId = 0; class TodoApp extends Component { render() { const { todos, visibilityFilter } = this.props; const visibleTodos = getVisibleTodos( todos, visibilityFilter ); return ( <div> <input ref={node => { this.…