[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 ...
随机推荐
- 我对Backbone中url属性的理解
Model中有一个url属性,而且有一个urlRoot属性. Collection中也有一个url属性. // 这是Model中的url方法 url: function() { var base = ...
- 用POP动画引擎实现弹簧动画(POPSpringAnimation)
效果图: #import "ViewController.h" #import <POP.h> @interface ViewController () @proper ...
- QT5-控件-QScrollArea-可以用于把一个窗口分割为多个-比如根据图片大小显示滚动条
#ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> #include <QLabel> #incl ...
- C++拾遗（八）类——概念、定义与实现
Class与Struct 区别在于class默认访问类型是private,struct默认访问类型是public. 另外在使用习惯上,struct只用来表示纯粹的数据对象或没有私有部分的类. 类中的内 ...
- 你好，C++（24）好大一个箱子！5.1.1 函数的声明和定义
第5章 用函数封装程序功能 在完成功能强大的工资程序V1.0之后,我们信心倍增,开始向C++世界的更深远处探索. 现在,我们可以用各种数据类型定义变量来表达问题中所涉及的各种数据:用操作符连接这些变量 ...
- Python文件处理之文件读取方式（二）
Python的open文件的读取方式有以下几种方法: read([size]):读取文件,如果传了size参数,则读取size字节,否则读取全部 readline([size]):读取一行 readl ...
- android项目中各个文件的介绍
src:java源码gen:自动生成 R.javaandroid.jarandroid Dependenvies 支持jar包assets:资产目录 小的数据库 网页 bin:编译生成的临时文件lib ...
- VC++中调用cmd的集中方式
1. system方法: 原型: int __cdecl system(const char *); 例如: system("ipconfig"); 2. WinExec方法: 相 ...
- hibernate 映射<四>多对一双向映射
学生和班级的例子来说,多个学生可以对应一个班级. 1.站在学生角度来说,学生就是多端.那么我们可以通过多对一来维护2者的关系. 2.站在班级的角度来说,班级就是一端.那么我们可以通过一对多啦维护2者的 ...
- In App Purchases（IAP 应用程序內购买）: 完全攻略
原文: http://troybrant.net/blog/2010/01/in-app-purchases-a-full-walkthrough/ 参考: http://www.cocoachina ...