[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>
时间: 2024-10-05 04:59:13

[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 = [], action) => { switch(action.type){ case 'ADD_ITEM': return state = [ ...state, { text: action.text, id: action.id, completed: false } ]; default: return s

Redux+React Router+Node.js全栈开发

详情请交流  QQ  709639943 01.Java深入微服务原理改造房产销售平台 02.跨平台混编框架 MUI 仿豆瓣电影 APP 03.Node.js入门到企业Web开发中的应用 04.Redux+React Router+Node.js全栈开发 05.Java秒杀系统方案优化 高性能高并发实战 06.企业级刚需Nginx入门,全面掌握Nginx配置+快速搭建高可用架构 07.快速上手Linux 玩转典型应用 08.全面系统讲解CSS 工作应用+面试一步搞定 09.Java Spring

[Redux] React Todo List Example (Toggling a Todo)

/** * 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 ( s

Flux --&gt; Redux --&gt; Redux React 入门 基础实例使用

本文的目的很简单,介绍Redux相关概念用法 及其在React项目中的基本使用 假设你会一些ES6.会一些React.有看过Redux相关的文章,这篇入门小文应该能帮助你理一下相关的知识 一般来说,推荐使用 ES6+React+Webpack 的开发模式,但Webpack需要配置一些东西,你可以先略过,本文不需要Webpack基础 入门,只是一些基础概念和用法的整理,更完整的内容推荐去看看文档,英文,中文 (不过我个人认为,官方文档的例子相对来说太复杂了,很难让新手马上抓住重点) (官方的例子正

react redux

https://github.com/jackielii/simplest-redux-example/blob/es5/index.js redux https://github.com/rackt/react-redux/blob/master/docs/quick-start.md#quick-start http://rackt.org/redux/ react boilerplate https://github.com/anorudes/redux-easy-boilerplate

react+redux教程(五)异步、单一state树结构、componentWillReceiveProps

教程目录 react+redux教程(一)connect.applyMiddleware.thunk.webpackHotMiddleware react+redux教程(二)redux的单一状态树完全替代了react的状态机? react+redux教程(三)reduce().filter().map().some().every()....展开属性 react+redux教程(四)undo.devtools.router react+redux教程(五)异步.单一state树结构.compo

[iOS] 用 Swift 开发一个 TODO 应用

原文地址:http://blog.callmewhy.com/2014/09/15/todo-list-in-swift/ 背景 相信不少 iOS 程序员对于 Swift 依旧持以观望的态度,一来是这小家伙刚出来没几天,本身还处于完善的阶段:二来是学习的成本较高,看完官方文档怎么也要个几天的时间:三来是反正最近几年很难在工程项目里推广使用,工作又用不到,那我学个锤子呐. 是的,我一开始也是这么想的.直到有一天,我遇到了它:Swift Tutorial - To Do List App.这是 Yo

代码中的TODO

代码中特殊的注释--TODO 和 FIXME的用处 TODO: 说明等待实现的功能 如果代码中有该标识,说明在标识处有功能代码待编写,待实现的功能在说明中会简略说明. FIXME: 说明需要修正的功能 如果代码中有该标识,说明标识处代码需要修正,甚至代码是错误的,不能工作,需要修复,如何修正会在说明中简略说明. VSCode中可以使用TODO Highlight,非常好的管理TODO插件

TODO的用法

在android开发中,我们经常会使用TODO来标记我们的代码,一般是用来表示待完成,或者待解决的部分.本文将详细介绍一下TODO的用法,及一些相关的扩展.(本文是在别人文章上做一点编辑,出处:http://blog.csdn.net/my_truelove/article/details/72857949) 一.TODO用法 1.添加TODO 2.查看TODO 在android studio左下角,有一个按钮,可以查看 如果没有 TODO tab,你可以通过左上角的菜单打开:View -> T