[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 ...
随机推荐
- 用win32API 实现TextBox水印特效
demo效果:
- sharepoint2013小技巧
一.创建基于经典认证的应用程序 New-SPWebApplication -Name "Contoso Internet Site" -ApplicationPool " ...
- asp.net微信开发第八篇----永久素材管理
除了3天就会失效的临时素材外,开发者有时需要永久保存一些素材,届时就可以通过本接口新增永久素材. 最近更新,永久图片素材新增后,将带有URL返回给开发者,开发者可以在腾讯系域名内使用(腾讯系域名外使用 ...
- 静默安装ORACLE【weber出品必属精品】
安装配置系统环境安装linux ,所有服务都不选择,只是选择安装开发工具,不要安装防火墙(当然也可以在后面关闭) 打开终端,执行如下命令,检查安装包,没有的都要安装 make, glibc, liba ...
- Delphi 做ActiveX的详细过程
1.新建 如下图 点击OK 依然点击OK 出现了如上图的节面,就像窗体一样. 然后 你就想干什么干什么. 这个做好之后, 这个是我设计的窗体. 然后 就添加 外部可以调用的接口了. 如果你不想让外部调 ...
- icon font
简而言之,就是: 使用 特殊字符 + (使用@font-face)自定义的字体 来代替图片文件显示图标. 关于@font-face, 参考来自W3CPLUS 的详细解释: css3 @font-fac ...
- Android环境搭建-Eclipse-Luna
所需软件:eclipse-jee-luna-R-win32-x86_64 所需插件:Adt 23.02 其他:Android SDK 环境搭建-JDK安装.Eclipse安装 配置安卓环境变量: cm ...
- linux下定时任务
一.linux定时任务软件种类 .at : 适合执行一次的任务.突发性的任务.需要启动 atd 服务才能执行任务. .crontab: 周期性的执行任务工作:启动crond 服务后可以执行任务.最常用 ...
- PHP判断文章里是否有图片
用preg_match来检查内容里是否有匹配的“<img”,其实我们还用preg_match来判断很多东西,比如邮箱地址里是否有“@”等,下面用一小段代码来演示具体用法. $content=&q ...
- 以前5年只专注于.net，现今开始学习java.
从2011年毕业至今一直在学习.net和c#,大概几年6月份底开始研究java了. 虽然不知道以后的路是否好走,但是我依然会努力.不放弃! 写这篇文字是为了鼓励自己,也为这段时光留下记忆.加油,红红!