2016-10-10 9 views
0

私はReactで始まり、ToDoリストを開始しました。追加、変更(完了/保留)、タスクの削除などの機能を備えています。以下は 状態のデータを変更しています

は、自分の行動

export const ADD_TASK = 'ADD_TASK'; 
export const TOGGLE_TASK = 'TOGGLE_TASK'; 
export const REMOVE_TASK = 'REMOVE_TASK'; 
export const FILTER_TASK = 'FILTER_TASK'; 

let todoId = 1; 

export function addTask(task) { 

    let todo = { 
     id: todoId++, 
     name: task, 
     status: 0, 
     visible: true 
    }; 

    return { 
     type: ADD_TASK, 
     payload: todo 
    }; 
} 

export function toggleTask(id) { 
    return { 
     type: TOGGLE_TASK, 
     payload: id 
    }; 
} 

export function removeTask(id) { 
    return { 
     type: REMOVE_TASK, 
     payload: id 
    }; 
} 

export function filterTask(id) { 
    return { 
     type: FILTER_TASK, 
     payload: id 
    }; 
} 

と私の減速である:私は状態を変更すると減速が悪い習慣であることをどこかで読ん

import { ADD_TASK, TOGGLE_TASK, REMOVE_TASK, FILTER_TASK } from '../actions/index'; 

let filterStatus = -1; 

//initial state is array because we want list of city weather data 
export default function(state = [], action) { 
    // console.log('Action received', action); 

    const toggling = function (t, action) { 
     if(t.id !== action) 
      return t; 

     return Object.assign({}, t, { 
      status: !t.status 
     }) 
    }; 

    const visibility = function(t, action) { 
     return Object.assign({}, t, { 
      visible: action === -1 ? true : t.status == action 
     }) 
    }; 

    switch(action.type) { 
     case ADD_TASK : 
      //return state.concat([ action.payload.data ]); //in redux reducer dont modify the state, instead create a new one baesd on old one. Here concat is create a new of old one and add a new data 
      return [ action.payload, ...state]; 
     case TOGGLE_TASK : 
      return state.map(s => toggling(s, action.payload)).map(t => visibility(t, filterStatus)); 
     case REMOVE_TASK : 
      return state.filter(s => { return (s.id != action.payload) }); 
     case FILTER_TASK : 
      filterStatus = action.payload; 

      return state.map(t => visibility(t, action.payload)); 
    } 
    return state; 
} 

、まだ私はそれをやっていると感じている私減速機。 還元剤の値の状態を追加、削除、更新する正しい方法を誰にも提案できますか? 視界ものを管理するための1、に1つ、追加トグルとタスクを削除する:

は、私はあなたが2つの減速が必要だと思うあなた

+0

マップ、フィルタ、および配列リテラルはすべて新しい状態オブジェクト(古い配列から新しい配列)を作成しています。 – azium

答えて

0

ありがとうございます。
2番目の部分については、私はこれをしたいと思います。

export const ADD_TASK = 'ADD_TASK'; 
export const TOGGLE_TASK = 'TOGGLE_TASK'; 
export const REMOVE_TASK = 'REMOVE_TASK'; 

let todoId = 1; 

export addTask = (text) => ({ 
    type: ADD_TASK, 
    id: todoId++, 
    text 
}); 

export toggleTask = (id) => ({ 
    type: TOGGLE_TASK, 
    id 
}); 

export removeTask = (id) => ({ 
    type: REMOVE_TASK, 
    id 
}); 

export function todosReducer(state = [], action) { 
    switch(action.type) { 
     case ADD_TASK : 
      return [...state, {id: action.id, text: action.text, completed: false}]; 
     case TOGGLE_TASK : 
      return state.map(task => task.id !== action.id ? task : {...task, completed: !task.completed}); 
     case REMOVE_TASK : 
      return state.filter(task => task.id !== action.id); 
    } 
    return state; 
} 
関連する問題