상태 개체 구조가 변경되었습니다.

Question

데이터베이스 상호 작용을 통해 작은 toDo 목록 응용 프로그램을 작성했습니다. 내 상태에서 toDo 목록 항목을 제거하려고 할 때 객체 상태 구조가 변경된다는 것을 제외하면 모든 것이 잘 작동합니다. 따라서 런타임시 ToDo 목록을 더 이상 렌더링 할 수 없습니다.

필자는 감속기 코드의 약간의 변경이 필요하다고 가정하지만, ES6 & Redux에서 경험할 수있는 약간의 경험이 있습니다.

이 내 감속기 코드입니다 :

export default (state = {items: []}, action) => { 
switch (action.type){ 
    case 'RECEIVE_POSTS': 
     return Object.assign({}, state, { 
      items: action.items 
     }); 
    case 'ADD_ITEM': 
     return Object.assign({}, state, { 
      items: [ 
       ...state.items, 
       action.items 
      ] 
     }); 
    case 'REMOVE_ITEM': 
     return Object.assign({}, state, { 
      items: [ 
       state.items.filter((items, id) => id !== action.id) 
      ] 
     }); 
    default: 
     return state 
    } 
    } 

그리고 내의 deleteItem -

export default function deleteItem(id){ 
console.log("test") 
return (dispatch, getState) => { 
    return dispatch (removeItem(dispatch, id)) 
    return dispatch (receiveDelete(id)) 
    } 
} 

function removeItem(dispatch, id){ 
    return dispatch => { 
    $.ajax({ 
     method: "POST", 
     url: "http://localhost:444/localWebServices/removeTask.php", 
     data: {id: id} 
    }).success(function(msg){ 
     console.log(msg) 
     dispatch(receiveDelete(id)) 
    }); 
    } 
    } 

    function receiveDelete(id){ 
    console.log("receive add") 
    return { 
    type: 'REMOVE_ITEM', 
    id: id 
    } 
    } 

그리고 여기에 전에 내가 항목을 삭제 한 후 개체 구조의 두 이미지 작업

.

이 내용을 명확하게 작성하십시오. 모든 것이 작동하지만 (목록이 렌더링 됨) 항목을 삭제 한 후에 상태 구조가 변경됨 -> 목록이 렌더링되지 않음. 오류 메시지가 표시되지 않습니다. 삭제하기 전에

:

삭제 후 :

어떤 도움이 좋을 것!

업데이트 :

코드를 변경했으며 더 이상 배열을 반환하지 않습니다. dev에 콘솔에 따르면 상태가 지금 올바른 것 같지만 렌더링되지 않습니다. 이 코드가 올바른 방향으로 가고 있습니까?

return Object.assign({}, state, { 
      items: state.items.filter((items, id) => id !== action.id) 
     }); 

Answer 1

인수 arrayElement, index, array 그래서 당신이 ** 현재의 모든 ** 항목 ** 플러스 ** 항목의 배열이 돈을 추가하고 삭제에 따라서 .filter(item => item.id !== action.id)