[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 ...
随机推荐
- 精通Django或Rails框架
Django是一个开放源代码的Web应用框架,由Python写成. Rubyon Rails 是一个用于开发数据库驱动的网络应用程序的完整框架.
- Wcf简单实例1
一.客户端添加服务引用,并调用 1.使用客户端代理同步调用 static void TestTwo() { /*********同步访问********/ Person.PersonServiceCl ...
- 浅谈PHP代码设计结构
浅谈PHP代码设计结构 您的评价: 还行 收藏该经验 coding多年,各种代码日夜相伴,如何跟代码友好的相处,不光成为职业生涯的一种回应,也是编写者功力的直接显露. 如何看 ...
- Android Studio Gradle 版本不同报错解决方法
由于GFW的原因,我们在使用as时经常出现失败,或者第一次新建工程不成功. 很多博客上已经提到了如何解决第一次新建工程Gradle构建的问题,那么在打开别的工程时依旧会报错 "Failed ...
- iOS开源 框架
UI界面类项目: Panoramagl ——720全景展示 Panorama viewer library foriPhone, iPad and iPod touch MBProgressHUD — ...
- Oracle数据库之PL/SQL异常处理
Oracle数据库之PL/SQL异常处理 异常指的是在程序运行过程中发生的异常事件,通常是由硬件问题或者程序设计问题所导致的. PL/SQL程序设计过程中,即使是写得最好的程序也可能会遇到错误或未预料 ...
- Android webview 应用
现在在android把一个网站打包成apk 是很简单的事,不懂一点代码的都可以去百度生成一个apk,app.当然样式就不是你所能控制的. 今天我就介绍一下 android 的 webview 在And ...
- 不能将值 NULL 插入列 'ID'，表 'EupStoreDemoDB.dbo.OrderDiary'；列不允许有 Null 值。INSERT 失败。
MVC,使用EF构建实体.将数据存入数据库,执行到_db.SaveChange()时,会报如下错误:
- [转]100个经典C语言程序（益智类问题）
目录: 1.绘制余弦曲线 2.绘制余弦曲线和直线 3.绘制圆 4.歌星大奖赛 5.求最大数 6.高次方数的尾数 8.借书方案知多少 9.杨辉三角形 10.数制转换 11.打鱼还是晒网 12.抓交通肇事 ...
- ulimit小结
1. limits是一个进程的资源,会被子进程继承 2. soft limit -S, hard limits -H hard limits只能被root用户修改,启动的时候会加载配置/etc/s ...