React-Redux 삭제 방법 1

 

redux로 state를 관리하면서 원하는 값을 삭제하는 방법 중 개인적으로 가장 쉽게 느껴진 방법을 소개하겠습니다.

 

아래는 실제 작성된 코드입니다

 

html 파일에 body 부분

 

 

js 파일

 

 

 

paintToDos 함수 내에서 store에 들어있는 state를 새 변수에 (toDos)에 담은 후

저는 toDos에  map을 사용하였고,

( forEach 반복문을 사용해도 무관합니다 여기서 el 은  toDos array에  각각의 데이터입니다 )

html button을 생성하고 생성된 button에 클릭이벤트를 만들어주고 , anymouse function으로 

dispatch 하는데

이때  { type : DELETE_TODO , id : el.id  }  데이터를 함께  에 보냅니다

el.id 는 각각의 데이터가 생성될 때 입력된 유니크한 id인데,

저는 생성된  id를 이용하여 원하는 데이터를 타깃 하여 삭제하였습니다. 

const reducer = (state = [], action) => {

  switch (action.type) {

    case ADD_TODO:

      return [...state, { text: action.text, id: Date.now() }];

    case DELETE_TODO:

      return state.filter((el) => el.id !== parseInt(action.id)); <--dispatch 로 보낸 데이터며, action.id로 사용힙니다.

    default:

      return state;

  }

};

 

저는 원래  불변성을 지키기 위해  ES6 spread 문법으로  state를  [... state]. map 하려 했는데,

공식문서에서 확인해보니 

Array.prototype.filter() 

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.

불변성 (immutable) (immutable)을 지킬 수 있다는 것이죠.

 

즉 제가 따로 copy 하여 사용하지 않아도 조건에 맞는 데이터들로  새롭게 생성되어 return 됩니다.!

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Array.prototype.filter() - JavaScript | MDN

 

(Tip)같이 알아두면 좋은 또 다른  함수중 splice () 함수가 있는데

 

Array.prototype.splice() 

splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.

 즉 splice 함수는 원본 값을 변경 (mutable)  합니다.! 

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

 

 

이상 redux를 이요한 delete 기능을 구현해보았습니다.

 

* 잘못된 부분이 있다면 댓글 부탁드립니다 *