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

이것이 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() 
})

그러나 이것은 입력 상태 객체를 변환하고 있습니다.새로운 객체를 반환하는 경우에도 이것이 금지되어 있습니까?

안 돼, 절대 네 주를 변형시키지 마

새로운 오브젝트를 반환하더라도 오래된 오브젝트를 오염시키고 있습니다.이것은 결코 하고 싶지 않은 일입니다.따라서 이전 상태와 새 상태를 비교할 때 문제가 발생합니다.예를 들어,shouldComponentUpdate리액트-렉스텍스가 후드 아래에서 사용하는 거죠또한 시간 여행을 불가능하게 만듭니다(즉, 실행 취소 및 다시 실행).

대신 불변의 방법을 사용합니다.항상 사용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() 
})

ES6Array.prototype.filtermethod는 조건과 일치하는 항목이 포함된 새 배열을 반환합니다.따라서 첫 번째 질문의 맥락에서, 이것은 다음과 같습니다.

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;

여러 가지 방법으로 환원수를 사용하여 항목을 삭제합니다.

방법 1: 이 경우 createSlice( .. )를 사용합니다.

const { id } = action.payload; // destruct id
removeCart: (state, action) =>{
                 let { id } = action.payload;
                 let arr = state.carts.filter(item => item.id !== parseInt(id))
                 state.carts = arr;
               }

방법 2: 이 경우 스위치(...), 확산 오퍼레이터를 사용합니다.

const { id } = action.payload; // destruct id

case actionTypes.DELETE_CART:  
     return {
        ...state,
        carts: state.carts.filter((item) => item.id !== payload)
      };

두 방법 모두 이 상태를 초기화했습니다.

  initialState: {
      carts: ProductData, // in productData mocked somedata     
    }

황금률이란 변이된 상태를 반환하지 않고 오히려 새로운 상태를 반환하는 것이다.작업 유형에 따라 상태 트리가 리듀서에 도달하면 다양한 형태로 상태 트리를 업데이트해야 할 수 있습니다.

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

이를 통해 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

언급URL : https://stackoverflow.com/questions/34582678/is-this-the-correct-way-to-delete-an-item-using-redux