[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 ...
随机推荐
- iOS-封装静态库
最近在做Apple的IOS开发,有开发静态库的需求,本身IOS的开发,只允许静态库或者Framework.在Xcode上没有找到允许编译,如同Android上的*.so和Win32上的dll这样的说法 ...
- Swift - 34 - 闭包的基础语法
//: Playground - noun: a place where people can play import UIKit // 初始化一个整数数组 var arr = [1, 3, 5, 7 ...
- 使用 pm2 来守护 NoderCMS
pm2 是一个带有负载均衡功能的Node应用的进程管理器,使用 pm2 可以帮助你守护和监控 NoderCMS 的正常运行, 基于Node.js+MongoDB的轻量级内容管理系统NoderCMS ...
- 武汉科技大学ACM：1001: 猴子选大王
Problem Description n只猴子要选大王,选举方法如下:所有猴子按 1,2 ……… n 编号并按照顺序围成一圈,从第 k 个猴子起,由1开始报数,报到m时,该猴子就跳出圈外,下一只猴子 ...
- C++中getline函数的使用
代码: #include <iostream> #include <cstdio> using namespace std; int main(){ char* s; s = ...
- ruby on rails 中render的使用
最近写ror,因为比较菜,很多东西不知道,只能看一点查一点了 render 先上点搜集的常用方式 render :action => "long_goal", :layout ...
- Ubuntu下MySQL配置为外网访问
Ububtu安装MySQL后默认外网无法连接,但是很多时候我们想要在外网访问方便管理.在这里,简单叙述一下自己在配置过程中的操作,步骤如下: 以root身份登入mysql mysql -u root ...
- 用命令行批处理bat，设置代理服务器、DNS、网关、WINS等
http://hi.baidu.com/83050158/blog/item/50cbd63f9da79ccb7d1e711b.html 将下面代码复制到记事本,另存为NetSet.bat,修改相应i ...
- 存储过程中update,然后用sql%判断update是否成功的存储过程
--更新用户状态 PROCEDURE P_UPDATE_USER_STATUS ( v_SrcID IN NUMERIC, v_DstID IN NUMERIC, v_DstType IN NUMER ...
- 更改xcode上iphone模拟器颜色的方法－－备用
到模拟器的目录下修改图片即可——在Finder中显示,显示模拟器包内容,修改Contents/Resources/frame.png图片!