[Redux] Extracting Presentational Components -- Footer, FilterLink
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>
);
}
}
const FilterLink = ({
filter,
currentFilter,
children
}) => {
if (filter === currentFilter) {
return <span>{children}</span>;
} return (
<a href='#'
onClick={e => {
e.preventDefault();
store.dispatch({
type: 'SET_VISIBILITY_FILTER',
filter
});
}}
>
{children}
</a>
);
};
Refactor footer part into a functional component, which contains all these three filter links. Pass in visibilityFilter as props:
const Footer = ({
visibilityFilter
}) => (
<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>
);
In the FilterLink, we want it to be presentational components. However, the filter link includes a short dispatch call. I am replacing it with an on click call. I pass the filter as the single parameter for the calling component's convenience. I add on click to the props.
const FilterLink = ({
filter,
currentFilter,
children,
onFilterClick
}) => {
if (filter === currentFilter) {
return <span>{children}</span>;
} return (
<a href='#'
onClick={e => {
e.preventDefault();
onFilterClick(filter);
}}
>
{children}
</a>
);
};
const Footer = ({
visibilityFilter,
onFilterClick
}) => (
<p>
Show:
{' '}
<FilterLink
filter='SHOW_ALL'
currentFilter={visibilityFilter}
onFilterClick={onFilterClick}
>
All
</FilterLink>
{', '}
<FilterLink
filter='SHOW_ACTIVE'
currentFilter={visibilityFilter}
onFilterClick={onFilterClick}
>
Active
</FilterLink>
{', '}
<FilterLink
filter='SHOW_COMPLETED'
currentFilter={visibilityFilter}
onFilterClick={onFilterClick}
>
Completed
</FilterLink>
</p>
);
-----------------------------------
Code:
const todo = (state, action) => {
switch (action.type) {
case 'ADD_TODO':
return {
id: action.id,
text: action.text,
completed: false
};
case 'TOGGLE_TODO':
if (state.id !== action.id) {
return state;
} return {
...state,
completed: !state.completed
};
default:
return state;
}
}; const todos = (state = [], action) => {
switch (action.type) {
case 'ADD_TODO':
return [
...state,
todo(undefined, action)
];
case 'TOGGLE_TODO':
return state.map(t =>
todo(t, action)
);
default:
return state;
}
}; const visibilityFilter = (
state = 'SHOW_ALL',
action
) => {
switch (action.type) {
case 'SET_VISIBILITY_FILTER':
return action.filter;
default:
return state;
}
}; const { combineReducers } = Redux;
const todoApp = combineReducers({
todos,
visibilityFilter
}); const { createStore } = Redux;
const store = createStore(todoApp); const { Component } = React; /**
Functional compoment, persental compoment: doesn't need to know what to do, just show the interface, call the callback function.
*/
const AddTodo = ({
onAddTodo
}) => { let input;
return (
<div>
<input ref={node => {
input = node;
}} />
<button onClick={() => {
onAddTodo(input.value);
input.value = '';
}}>
Add Todo
</button>
</div>
);
} /* Functional component */
const Footer = ({
visibilityFilter,
onFilterClick
}) => (
<p>
Show:
{' '}
<FilterLink
filter='SHOW_ALL'
currentFilter={visibilityFilter}
onFilterClick={onFilterClick}
>
All
</FilterLink>
{', '}
<FilterLink
filter='SHOW_ACTIVE'
currentFilter={visibilityFilter}
onFilterClick={onFilterClick}
>
Active
</FilterLink>
{', '}
<FilterLink
filter='SHOW_COMPLETED'
currentFilter={visibilityFilter}
onFilterClick={onFilterClick}
>
Completed
</FilterLink>
</p>
); const FilterLink = ({
filter,
currentFilter,
children,
onFilterClick
}) => {
if (filter === currentFilter) {
return <span>{children}</span>;
} return (
<a href='#'
onClick={e => {
e.preventDefault();
onFilterClick(filter);
}}
>
{children}
</a>
);
}; const getVisibleTodos = (
todos,
filter
) => {
switch (filter) {
case 'SHOW_ALL':
return todos;
case 'SHOW_COMPLETED':
return todos.filter(
t => t.completed
);
case 'SHOW_ACTIVE':
return todos.filter(
t => !t.completed
);
}
} let nextTodoId = 0;
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
})
}
/>
<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>
<Footer
visibilityFilter = {visibilityFilter}
onFilterClick={ (filter) => {
store.dispatch({
type: 'SET_VISIBILITY_FILTER',
filter
});
}}
/>
</div>
);
}
} const render = () => {
ReactDOM.render(
<TodoApp
{...store.getState()}
/>,
document.getElementById('root')
);
}; store.subscribe(render);
render();
[Redux] Extracting Presentational Components -- Footer, FilterLink的更多相关文章
- [Redux] Extracting Presentational Components -- AddTodo
The code to be refactored: let nextTodoId = 0; class TodoApp extends Component { render() { const { ...
- [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 Presentational Components -- Todo, TodoList
Code to be refactored: let nextTodoId = 0; class TodoApp extends Component { render() { const { todo ...
- [Redux] Extracting Container Components -- Complete
Clean TodoApp Component, it doesn't need to receive any props from the top level component: const To ...
- [Redux] Extracting Container Components (FilterLink)
Learn how to avoid the boilerplate of passing the props down the intermediate components by introduc ...
- [Redux] Redux: Extracting Container Components -- AddTodo
Code to be refactored: const AddTodo = ({ onAddClick }) => { let input; return ( <div> < ...
- [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 ...
- Presentational and Container Components
https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0 There’s a simple pattern I fi ...
随机推荐
- javaCV:爱之初体验
最近实验室有了新任务,要求使用java进行模式识别,在具体点就是人脸识别.精确的边缘检测. 第一个问题便是环境配置,搭建工作台.(其实也不是什么难事,但是本人虽然从事较多的java开发,但很少接触模式 ...
- How to get multi-touch working(Linux and Andriod)
1.在hid-ids.h中加入vid pid 2.在hid-multitouch..c->mt_devices[] 中加入 { ...
- 在浏览器中就可以写F#程序了,你试试吧
学习F#有一种简单办法,不需要安装Visual Studio,在浏览器中就可以写F#了,非常方便,进入下面的链接,你可以试试. http://www.tryfsharp.org/Learn
- WPF样式和资源2
<Window.Resources> <FontFamily x:key="ButtonFontFamily">Time New Roman</Fon ...
- easyui 点击combox 文本框 显示下拉 panel
$(".combo-text").click(function () { var mid = $(this).parent().parent().find("select ...
- 在MVC中利用uploadify插件实现上传文件的功能
趁着近段的空闲时间,开发任务不是很重,就一直想把以前在仓促时间里所写的多文件上传功能改一下,在网上找了很多例子,觉得uploadify还可以,就想用它来试试.实现自己想要的功能.根据官网的开发文档,同 ...
- Chrome调试nodejs
1.安装node-inspector 命令: npm install -g node-inspector 2.nodemon --debug xxx.js启动项目(如果使用--debug-brk 就会 ...
- js 获取mac地址
js 获取mac地址 function MacInfo(){ var locator =new ActiveXObject ("WbemScripting.SWbemLocator" ...
- PHP扩展开发(3)-config.m4
1. 宏命令 1.1. dnl 注释 1.2. 扩展的工作方式 1.2.1) PHP_ARG_WITH不需要第三方库 1.2.2) PHP_ARG_E ...
- google 地图,多个标记 js库
360 云盘:http://yunpan.cn/cVgU3X7JFxAGY (提取码:1f07) 百度云盘:链接: http://pan.baidu.com/s/1c0fbCWw 密码: w1pm 参 ...