function findElement(id, array) {
  return array.map(function(element) {
    return element.id
  }).indexOf(id);
}

//Reducer：更新state的函式
const todos = (state = { todos: [], filter: 'all', counter: 0 }, actions) => {
  switch(actions.type) {
    case 'ADD_TODO':
      state.todos.push({
        id: state.counter++,
        name: actions.name,
        completed: false
      });
      break;
    case 'DELETE_TODO':
      state = Object.assign({}, state, state.todos.splice(findElement(actions.id, state.todos), 1));
      break;
    case 'EDIT_TODO':
      state.todos[findElement(actions.id, state.todos)].name = actions.name;
      break;
    case 'COMPLETE_TODO':
      state.todos[findElement(actions.id, state.todos)].completed = actions.completed;
      break;
    case 'INCOMPLETE_TODO':
      state.todos[findElement(actions.id, state.todos)].completed = actions.completed;
      break;
    case 'FILTER_COMPLETED':
      state.filter = 'completed';
      break;
    case 'FILTER_ALL':
     state.filter = 'all'
      break;
    default:
      break;
  }

  return state;
}

//Store：儲存state的地方
const todosStore = Redux.createStore(todos);

//Action：使用todosStore.dispatch來通知有事情發生，必須更新state
$('.add').click(() => {
  var newValue = $('.input_new_item').val();
  if(newValue) {
    todosStore.dispatch({
      type: 'ADD_TODO',
      name: newValue
    });
  }

  $('.input_new_item').val('');
});

$('.list').on('click', '.delete', function() {
  todosStore.dispatch({
    type: 'DELETE_TODO',
    id: $(this).parents('.item').data('id')
  });
});

$('.list').on('click', '.edit', function() {
  $(this).hide();
  $(this).parents('.item').find('.edit-block').show();
});

$('.list').on('click', '.submit', function() {
  var $item = $(this).parents('.item');

  todosStore.dispatch({
    type: 'EDIT_TODO',
    id: $item.data('id'),
    name: $item.find('.input-edit').val()
  });

  $item.find('.edit').show();
  $item.find('.edit-block').hide();
});

$('.list').on('change', '.complete-status', function() {
  var isCompleted = $(this).prop('checked');
  var actionType = 'INCOMPLETE_TODO';

  if(isCompleted) {
    actionType = 'COMPLETE_TODO'
  }

  todosStore.dispatch({
    type: actionType,
    id: $(this).parents('.item').data('id'),
    completed: isCompleted
  });

});

$('.filter-complete').click(() => {
  todosStore.dispatch({
    type: 'FILTER_COMPLETED'
  });
});

$('.filter-all').click(() => {
  todosStore.dispatch({
    type: 'FILTER_ALL'
  });
});

//監聽，當dispatch action執行造成state改變時就去取目前state內容，用來更新UI
todosStore.subscribe(() => {
  var state = todosStore.getState();
  var ResultHTML = '';

  for(var i = 0; i < state.todos.length; i++) {
    let HTML = '';
    let item = state.todos[i];
    let status = item.completed ? 'checked' : '';
    let hide = (state.filter === 'completed' && !item.completed) ? 'hide' : '';

    HTML += [
      '<li class="item ' + hide + '" data-id="' + item.id + '">',
      '  <input type="checkbox" class="complete-status"' + status +'>',
      '  <span class="name">' + item.name + '</span>',
      '  <span class="edit-block hide">',
      '    <input class="input-edit" />',
      '    <button class="submit">submit</button>',
      '  </span>',
      '  <button class="edit">edit</button>',
      '  <button class="delete">delete</button>',
      '</li>'
    ].join('');
    ResultHTML += HTML;
  }

  $('#todoList .list').html(ResultHTML);
});
@@ -1,16 +1,104 @@
+const SHOW_ALL = 'SHOW_ALL';%0Aconst SHOW_COMPLETED = 'SHOW_COMPLETED';%0Avar counter = 0;%0A%0A
 function findEle
@@ -224,21 +224,22 @@
 %E5%BC%8F%0Aconst 
-todos
+filter
  = (stat
@@ -246,48 +246,214 @@
 e = 
-%7B todos: %5B%5D, filter: 'all', counter: 0 %7D
+SHOW_ALL, action) =%3E %7B%0A  switch (action.type) %7B%0A    case SHOW_ALL:%0A      return action.type%0A    case SHOW_COMPLETED:%0A      return action.type%0A    default:%0A      return state%0A  %7D%0A%7D%0A%0Aconst todos = (state = %5B%5D
 , ac
@@ -522,22 +522,16 @@
   state.
-todos.
 push(%7B%0A 
@@ -541,22 +541,16 @@
     id: 
-state.
 counter+
@@ -667,47 +667,8 @@
 tate
- = Object.assign(%7B%7D, state, state.todos
 .spl
@@ -704,20 +704,13 @@
 tate
-.todos
 ), 1)
-)
 ;%0A  
@@ -745,38 +745,32 @@
 DO':%0A      state
-.todos
 %5BfindElement(act
@@ -783,22 +783,16 @@
 d, state
-.todos
 )%5D.name 
@@ -849,38 +849,32 @@
 DO':%0A      state
-.todos
 %5BfindElement(act
@@ -879,38 +879,32 @@
 ctions.id, state
-.todos
 )%5D.completed = a
@@ -1009,22 +1009,16 @@
 d, state
-.todos
 )%5D.compl
@@ -1060,146 +1060,8 @@
 ak;%0A
-    case 'FILTER_COMPLETED':%0A      state.filter = 'completed';%0A      break;%0A    case 'FILTER_ALL':%0A     state.filter = 'all'%0A      break;%0A
     
@@ -1127,24 +1127,84 @@
 te%E7%9A%84%E5%9C%B0%E6%96%B9%0Aconst 
+todoApp = Redux.combineReducers(%7B%0A  filter,%0A  todos%0A%7D);%0Avar 
 todosStore =
@@ -1230,11 +1230,12 @@
 todo
-s);
+App)
 %0A%0A//
@@ -2442,23 +2442,20 @@
   type: 
-'FILTER
+SHOW
 _COMPLET
@@ -2456,17 +2456,16 @@
 OMPLETED
-'
 %0A  %7D);%0A%7D
@@ -2537,20 +2537,16 @@
 pe: 
-'FILTER
+SHOW
 _ALL
-'
 %0A  %7D
@@ -2881,19 +2881,22 @@
 === 
-'completed'
+SHOW_COMPLETED
  && 

divide reducer into two parts: todos and filter