[Redux] React Todo List Example (Adding a Todo)
Learn how to create a React todo list application using the reducers we wrote before.
/**
* A reducer for a single todo
* @param state
* @param action
* @returns {*}
*/
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;
}
}; /**
* The reducer for the todos
* @param state
* @param action
* @returns {*}
*/
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; }
}; /**
* Reducer for the visibilityFilter
* @param state
* @param action
* @returns {*}
*/
const visibilityFilter = ( state = 'SHOW_ALL',
action ) => {
switch ( action.type ) {
case 'SET_VISIBILITY_FILTER':
return action.filter;
default:
return state;
}
}; /**
* combineReducers: used for merge reducers togethger
* createStore: create a redux store
*/
const { combineReducers, createStore } = Redux;
const todoApp = combineReducers( {
todos,
visibilityFilter
} ); const store = createStore( todoApp ); /**
* For generate todo's id
* @type {number}
*/
let nextTodoId = 0; /**
* React related
*/
const {Component} = React;
class TodoApp extends Component {
render() {
return (
<div>
<input ref={
(node)=>{
this.input = node
}
}/>
<button onClick={
()=>{
//After clicking the button, dispatch a add todo action
store.dispatch({
type: 'ADD_TODO',
id: nextTodoId++,
text: this.input.value
})
this.input.value = "";
}
}>ADD todo
</button>
<ul>
//loop thought the todo list
{this.props.todos.map( ( todo )=> {
return <li key={todo.id}>{todo.text}</li>
} )}
</ul>
</div>
);
}
} const render = () => {
ReactDOM.render(
<TodoApp todos={store.getState().todos}/>,
document.getElementById( 'root' )
);
}; //Every time, store updated, also fire the render() function
store.subscribe( render );
render();
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.4/redux.js"></script>
<script src="https://fb.me/react-0.14.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.js"></script> <title>JS Bin</title>
</head>
<body> <div id="root"></div>
</body>
</html>
[Redux] React Todo List Example (Adding a Todo)的更多相关文章
- [Redux] Writing a Todo List Reducer (Adding a Todo)
Learn how to implement adding a todo in a todo list application reducer. let todo = (state = [], act ...
- [Redux] React Todo List Example (Filtering Todos)
/** * A reducer for a single todo * @param state * @param action * @returns {*} */ const todo = ( st ...
- [Redux] Writing a Todo List Reducer (Toggling a Todo)
Learn how to implement toggling a todo in a todo list application reducer. let todo = (state = [], a ...
- RxJS + Redux + React = Amazing!（译一）
今天,我将Youtube上的<RxJS + Redux + React = Amazing!>翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: https:/ ...
- RxJS + Redux + React = Amazing!（译二）
今天,我将Youtube上的<RxJS + Redux + React = Amazing!>的后半部分翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: ht ...
- Redux & React & react-redux
Redux Redux & React & react-redux https://redux.js.org/ https://redux.js.org/api https://red ...
- Redux React & Online Video Tutorials
Redux React & Online Video Tutorials https://scrimba.com/@xgqfrms https://scrimba.com/c/cEwvKNud ...
- [Redux] React Todo List Example (Toggling a Todo)
/** * A reducer for a single todo * @param state * @param action * @returns {*} */ const todo = ( st ...
- React开发入门：以开发Todo List为例
目录 概述 React基本概念 JSX是什么? 设置React APP 初始化APP 应用结构 探索第一个React组件 index.js 变量和props JSX中的变量 组件props props ...
随机推荐
- CSS3 之动画及兼容性调优
由于CSS3动画对低版本的浏览器的支持效果并不是很好,特别是IE9及以下版本,更是无法支持. 所以有时候一些简单的动画效果,还只是用js代码来实现,但是效率偏低,而且效果有些偏生硬,不够顺滑. 毕竟用 ...
- html行内元素 和 块状元素 总结
块状元素 address - 地址blockquote - 块引用center - 举中对齐块dir - 目录列表div - 常用块级容易,也是CSS layout的主要标签dl - 定义列表fiel ...
- 注意 reader["yjID"] == DBNull.Value而不是null
自己做的项目吃的大亏,由于原始数据yjID这个字段里面什么都没有,所以,这个地方报错,说是字符串格式不支持,应该为DBNull.Value而不是null,DBNull.Value代表数据库(用的acc ...
- 如何安装Git到MAC OS X
这里介绍两种方式:一,使用Git command-line二,使用GUI工具SourceTree,功能很强大,很方便 在进行安装前,要说一下,Git和SVN一样,都需要创建一个服务器的,他们都可以创建 ...
- WAJUEJI which home strong！
算法:搜索+优先队列 描述 在一个山沟里,姐弟俩同时考上了大学.但由于家里拮据,所以这并不是什么好消息.父亲对孩子说:我就是砸锅卖铁也要把你们姐俩供出来. 当时的姐姐已经决定放弃上学的机会. 没想到第 ...
- Delphi之TreeView
TreeView是Delphi中使用频率比较高的一个控件,虽然使用次数很多,但总结不够.借着这次做GDW原型的机会总结一下,写的过程中也会参考网上的博文. TTreeView.TTreeNodes和T ...
- crtmpserver组网方案
A Powerful Live Streaming Setup 搭建强大的直播系统 Recently we had a project requiring live streaming setup, ...
- IIS下图片防盗连设置详解
小站只有100个IIS,盗链后经常是连主页都打不开,就想着弄个图片防盗链,在网上找了一下资料,正则表达式的写法啊,ISAPI_REWRITE基本配置啊等等,找来啃了一天终于发现有三个方法实现. 第一. ...
- twsited(5)--不同模块用rabbitmq传递消息
上一章,我们讲到,用redis共享数据,以及用redis中的队列来实现一个简单的消息传递.其实在真实的过程中,不应该用redis来传递,最好用专业的消息队列,我们python中,用到最广泛的就是rab ...
- cocos2d-js 入门之碰撞
本文由qinning199原创,转载请注明:http://www.cocos2dx.net/post/223 1.cc.rectIntersectsRect(ra,rb) 判断两个矩形是否相交,若相交 ...