[Redux] Redux: Extracting Container Components -- AddTodo

【[Redux] Redux: Extracting Container Components -- AddTodo】的更多相关文章

[Redux] Redux: Extracting Container Components -- AddTodo

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…

[Redux] Extracting Container Components (FilterLink)

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…

[Redux] Extracting Container Components -- Complete

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…

[Redux] Extracting Container Components -- VisibleTodoList

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…

[Redux] Extracting Presentational Components -- AddTodo

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…

[React] 11 - Redux: redux

Ref: Redux中文文档 Ref: React 讀書會 - B團 - Level 19 Redux 深入淺出 Ref: React+Redux 分享會 Ruan Yifeng, Redux 架构: 教程一(有代码).教程二.教程三 Redux 入门教程 #1 课程介绍 Redux 入门教程 #2 为什么需要 Redux Redux 入门教程 #3 什么是 Redux Redux 入门教程 #4 创建页面 Redux 入门教程 #5 单独使用 Redux Redux 入门教程 #6 使用 re…

Presentational and Container Components

https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0 There’s a simple pattern I find immensely useful when writing React applications. If you’ve been doing React for a while, you have probably already discovered it. This article exp…