[Redux] Extracting Presentational Components -- Todo, TodoList
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.input = node;
}} />
<button onClick={() => {
store.dispatch({
type: 'ADD_TODO',
text: this.input.value,
id: nextTodoId++
});
this.input.value = '';
}}>
Add Todo
</button>
<ul>
{visibleTodos.map(todo =>
<li key={todo.id}
onClick={() => {
store.dispatch({
type: 'TOGGLE_TODO',
id: todo.id
});
}}
style={{
textDecoration:
todo.completed ?
'line-through' :
'none'
}}>
{todo.text}
</li>
)}
</ul>
<p>
Show:
{' '}
<FilterLink
filter='SHOW_ALL'
currentFilter={visibilityFilter}
>
All
</FilterLink>
{', '}
<FilterLink
filter='SHOW_ACTIVE'
currentFilter={visibilityFilter}
>
Active
</FilterLink>
{', '}
<FilterLink
filter='SHOW_COMPLETED'
currentFilter={visibilityFilter}
>
Completed
</FilterLink>
</p>
</div>
);
}
}
First extact a single Todo as a persental component: which doesn't know what to do, just response for showing the interface:
So it accept a callback function to the onClick handler:
//remove
onClick={() => {
store.dispatch({
type: 'TOGGLE_TODO',
id: todo.id
});
}} -------------
// replace onClick={onTodoClick}
const Todo = ({
text,
completed,
onTodoClick
})=>{
return (
<li
onClick={onTodoClick}
style={{
textDecoration:
completed ?
'line-through' :
'none'
}}>
{text}
</li>
);
}
TodoList, should also be a persentional component:
const TodoList = ({
todos,
onTodoClick
}) => {
return (
<ul>
{todos.map(todo =>
<Todo
key={todo.id}
{...todo}
onClick={
()=>{
onTodoClick
}
}
/>
)}
</ul>
);
}
The TodoApp is the 'contianer component' which tell 'persentional componet' what to display and the action to dispatch.
class TodoApp extends Component {
render() {
const {
todos,
visibilityFilter
} = this.props;
const visibleTodos = getVisibleTodos(
todos,
visibilityFilter
);
return (
<div>
<AddTodo
onAddTodo={ text =>
store.dispatch({
type: 'ADD_TODO',
id: nextTodoId++,
text
})
}
/>
<TodoList
todos={visibleTodos}
onTodoClick={
(id)=>{
store.dispatch({
type: 'TOGGLE_TODO',
id
})
}
}
/>
<Footer
visibilityFilter = {visibilityFilter}
onFilterClick={ (filter) => {
store.dispatch({
type: 'SET_VISIBILITY_FILTER',
filter
});
}}
/>
</div>
);
}
}
in a word:
Presentaional compnent doesn't need to know what to do, only response for display.
Container component dispatch the action, and pass down to the persentional component.
[Redux] Extracting Presentational Components -- Todo, TodoList的更多相关文章
- [Redux] Extracting Presentational Components -- AddTodo
The code to be refactored: let nextTodoId = 0; class TodoApp extends Component { render() { const { ...
- [Redux] Extracting Presentational Components -- Footer, FilterLink
Code to be refactored: let nextTodoId = 0; class TodoApp extends Component { render() { const { todo ...
- [Redux] Extracting Presentational Components -- TodoApp
Finally, I just noticed that the to-do app component doesn't actually have to be a class. I can turn ...
- [Redux] Extracting Container Components -- Complete
Clean TodoApp Component, it doesn't need to receive any props from the top level component: const To ...
- [Redux] Redux: Extracting Container Components -- AddTodo
Code to be refactored: const AddTodo = ({ onAddClick }) => { let input; return ( <div> < ...
- [Redux] Extracting Container Components (FilterLink)
Learn how to avoid the boilerplate of passing the props down the intermediate components by introduc ...
- [Redux] Extracting Container Components -- VisibleTodoList
Code to be refacted: const TodoList = ({ todos, onTodoClick }) => ( <ul> {todos.map(todo =& ...
- [Redux] Extracting Action Creators
We will create an anction creator to manage the dispatch actions, to keep code maintainable and self ...
- react+redux+generation-modation脚手架添加一个todolist
当我遇到问题: 要沉着冷静. 要管理好时间. 别被bug或error搞的不高兴,要高兴,又有煅炼思维的机会了. 要思考这是为什么? 要搞清楚问题的本质. 要探究问题,探究数据的流动. TodoList ...
随机推荐
- jquery源码阅读笔记一
1. jquery无new的构造函数. 无new的构造函数是怎么实现的.比如我们一般这么用jQuery. $(".test").text(); 但是我们一般是这么写的. var t ...
- 3、第3课CSS块级、行内元素、绝对定位、相对定位、固定位置20150922
1.块级元素 A:特点: A.1默认显示在父标签的左上角 A.2块级元素默认占满一行(占满整个文档流) B:常见的块级元素 P h1--h6 ul li ol li div h ...
- ExtJs在vs中的应用
目标: 认识EXTJS(自己google) 在vs中创建EXTJS的编程环境 通过一个简单的例子了解EXTJS编程过程 内容: 个人理解EXTJS是一个基于ajax富客户端应用程序框架, 1,创建vs ...
- C#类、静态类
C#是面向对象(object-oriented)类型的计算机语言,使用类(class)来体现面向对象的概念. 分类(classification) 我们在现实世界中,会遇到很多被分类的事物.例如,动物 ...
- C#多态联系之虚方法
class Class1 { static void Main(string[] args) { YuanGong yg = new YuanGong(); JingLi jl = new JingL ...
- 22 java常用方法
/** * 通过正则获取该目录下满足条件的所有目录 * @param luceneFilePathRegular 正则目录,如/user/solrindex/正则表达式 * @return 满足正则表 ...
- Altium Designer极坐标布局方法
1.键盘快捷组合 O+G,打开栅格管理器,点击左下角的“菜单”,在对话框中的选择“添加极坐标栅格”. 2.双击新添加的优先等级为1的栅格,在弹出的polar grid editor 对话框中,对里边 ...
- 《APUE》读书笔记第十三章-守护进程
守护进程 守护进程是生存期较长的一种进程,它们常常在系统自举时启动,仅在系统关闭时才终止.因为它们没有控制终端,所以说它们是在后台运行的.UNIX系统由很多守护进程,它们执行日常事务活动. 本章主要介 ...
- 公众号的秘密,知道一个biz就够了
公众号的秘密,知道一个biz就够了 微信对于我来说,最有价值的是一个学习渠道,特别是搜狗微信搜索(http://weixin.sogou.com/)能够很方便的搜索公众账号和文章内容,PC端就能够获得 ...
- Java系列--第三篇 基于Maven的Android开发CAIO
学习要打好基础,这里用一个项目来学习一下Android的组件,参考网址为这个但不限于这个.有些东西的学习,理解三遍理论还不如一遍操作,所谓理论来自实践,实践是检验真理的唯一标准.所以,虽然看懂了那篇文 ...