zoukankan      html  css  js  c++  java
  • [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 = [], action) => {
      
      switch(action.type){
        case 'ADD_ITEM':
          return state = [
            ...state,
            {
              text: action.text,
              id: action.id,
              completed: false
            }
          ];
        case 'TOGGLE_ITEM':
          return state.map( (todo) => {
            if(todo.id !== action.id){
              return todo;
            }else{
             return {
              ...todo,
              completed: !todo.Completed// will overwirte the todo object's completed prop
            }; 
            }
          })
        default:
          return state;
      }
    };
    
    let testTodo_addItem = () => {
      let stateBefore = [];
      let action = {
        type: 'ADD_ITEM',
        text: 'Learn Redux',
        id: 0
      };
      let stateAfter = [
        {
          text: 'Learn Redux',
          id: 0,
          completed: false,
        }
      ];
      
      deepFreeze(stateBefore);
      deepFreeze(action);
      
      expect(
        todo(stateBefore, action)
      ).toEqual(stateAfter);
    };
    
    let testTodo_toggleItem = () => {
      let stateBefore = [
        {
          text: 'Learn Redux',
          id: 0,
          completed: false
        },
        {
          text: 'Learn Angular2',
          id: 1,
          completed: false
        }
      ];
      let action = {
        type: 'TOGGLE_ITEM',
        id: 1
      };
      
      let stateAfter = [
        {
          text: 'Learn Redux',
          id: 0,
          completed: false
        },
        {
          text: 'Learn Angular2',
          id: 1,
          completed: true
        }
      ];
      
      deepFreeze(stateBefore);
      deepFreeze(action);
      
      expect(
        todo(stateBefore, action)
      ).toEqual(stateAfter);
    }
    
    testTodo_toggleItem();
    
    console.log("All tests passed!");
  • 相关阅读:
    装饰者设计模式
    Base64技术:把对象转变成字符串
    Android获取网络数据进行GZIP解压
    自定义Button成进度条
    Android:TextView最小行数设置
    介绍两个Android不常用的Drawable:GradientDrawable和 StateListDrawable
    Json介绍
    Android自定义XML属性
    Android手机图片适配问题
    AsyncTask
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5011828.html
Copyright © 2011-2022 走看看