[javascript] 이것이 redux를 사용하여 항목을 삭제하는 올바른 방법입니까?

Program / 글쓴이

입력을 변경해서는 안되며 개체를 복제하여 변경해야한다는 것을 알고 있습니다. 나는 redux 스타터 프로젝트에서 사용되는 규칙을 따르고 있었다.

ADD_ITEM: (state, action) => ({
  ...state,
  items: [...state.items, action.payload.value],
  lastUpdated: action.payload.date
})

항목을 추가하기 위해-스프레드를 사용하여 배열에 항목을 추가합니다.

내가 사용한 삭제 : 

DELETE_ITEM: (state, action) => ({
  ...state,
  items: [...state.items.splice(0, action.payload), ...state.items.splice(1)],
  lastUpdated: Date.now() 
})

하지만 이것은 입력 상태 객체를 변경하고 있습니다-새 객체를 반환하더라도 이것이 금지되어 있습니까?

답변

아니요. 상태를 변경하지 마십시오.

새 객체를 반환하더라도, 절대 원하지 않는 이전 객체를 여전히 오염시키고 있습니다. 이것은 이전 상태와 새 상태를 비교할 때 문제가됩니다. 예를 들어 shouldComponentUpdatereact-redux가 내부적으로 사용하는 경우. 또한 시간 여행을 불가능하게 만듭니다 (예 : 실행 취소 및 다시 실행).

대신 변경 불가능한 방법을 사용하십시오. 항상 사용 Array#slice하고 절대 Array#splice.

귀하의 코드 action.payload에서 제거되는 항목의 색인 이라고 가정합니다 . 더 나은 방법은 다음과 같습니다.

items: [
    ...state.items.slice(0, action.payload),
    ...state.items.slice(action.payload + 1)
],

답변

배열 필터 메서드를 사용하여 원래 상태를 변경하지 않고 배열에서 특정 요소를 제거 할 수 있습니다. 

return state.filter(element => element !== action.payload);

코드 컨텍스트에서 다음과 같이 보일 것입니다.

DELETE_ITEM: (state, action) => ({
  ...state,
  items: state.items.filter(item => item !== action.payload),
  lastUpdated: Date.now() 
})

답변

ES6 Array.prototype.filter메서드는 기준과 일치하는 항목이있는 새 배열을 반환합니다. 따라서 원래 질문의 맥락에서 이것은 다음과 같습니다.

DELETE_ITEM: (state, action) => ({
  ...state,
  items: state.items.filter(item => action.payload !== item),
  lastUpdated: Date.now() 
})

답변

객체가있는 배열에 대한 변경 불가능한 “DELETED”감속기의 또 다른 변형 :

const index = state.map(item => item.name).indexOf(action.name);
const stateTemp = [
  ...state.slice(0, index),
  ...state.slice(index + 1)
];
return stateTemp;

답변

황금률은 변경된 상태가 아니라 새로운 상태를 반환하는 것입니다. 작업 유형에 따라 감속기에 도달 할 때 다양한 형태로 상태 트리를 업데이트해야 할 수 있습니다.

이 시나리오에서는 상태 속성에서 항목을 제거하려고합니다.

이것은 Redux의 변경 불가능한 업데이트 (또는 데이터 수정) 패턴의 개념을 가져옵니다. 상태 트리에서 값을 직접 변경하지 않고 항상 복사본을 만들고 이전 값을 기반으로 새 값을 반환하기를 원하기 때문에 불변성이 핵심입니다.

다음은 중첩 된 개체를 삭제하는 방법의 예입니다.

// ducks/outfits (Parent)

// types
export const NAME = `@outfitsData`;
export const REMOVE_FILTER = `${NAME}/REMOVE_FILTER`;

// initialization
const initialState = {
  isInitiallyLoaded: false,
  outfits: ['Outfit.1', 'Outfit.2'],
  filters: {
    brand: [],
    colour: [],
  },
  error: '',
};

// action creators
export function removeFilter({ field, index }) {
  return {
    type: REMOVE_FILTER,
    field,
    index,
  };
}

export default function reducer(state = initialState, action = {}) {
  sswitch (action.type) {  
  case REMOVE_FILTER:
  return {
    ...state,
    filters: {
    ...state.filters,
       [action.field]: [...state.filters[action.field]]
       .filter((x, index) => index !== action.index)
    },
  };
  default:
     return state;
  }
}

스 니펫 확장

이를 더 잘 이해하려면 https://medium.com/better-programming/deleting-an-item-in-a-nested-redux-state-3de0cb3943da 기사를 확인하십시오.

답변