• [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 ( 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}
                                    style={{
                                     textDecoration: todo.completed ?
                                     'line-through' : 'none'
                                    }}
    
                                    onClick={ ()=>{
                                       store.dispatch({
                                       type: 'TOGGLE_TODO',
                                       id: 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();

  • 相关阅读:
    AcWing 1135. 新年好 图论 枚举
    uva 10196 将军 模拟
    LeetCode 120. 三角形最小路径和 dp
    LeetCode 350. 两个数组的交集 II 哈希
    LeetCode 174. 地下城游戏 dp
    LeetCode 面试题 16.11.. 跳水板 模拟
    LeetCode 112. 路径总和 递归 树的遍历
    AcWing 1129. 热浪 spfa
    Thymeleaf Javascript 取值
    Thymeleaf Javascript 取值
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5125439.html
Copyright © 2020-2023  润新知