React-Redux 삭제 방법 2 (추가글)

react-redux 에 connect 함수를 이용하여 외부 컴포넌트에서 reducer 에 state , dispatch 를 사용하거나

 

접근할때 중 dispatch 에 대한 내용을 추가적으로 작성해보겠습니다.

 

store.js 파일 (reducer)

toDo.js 파일 (외부component)

 

1) store 파일에 만들어놓은 acrionHandler 에는 state 에 추가하는 addToDo 함수와 , 삭제하는 deleteToDo 함수가

object 형식으로 사용하기위해서 담아두었습니다. ( 각 함수마다 export 해서 사용하여도 됨)

 

2) toDo.js 파일에 dispatch 를 사용해야하기에 connect 함수를 import 한후 위와같이 argument는 state를 불러올필요

없기에 null 값을 주었고, 두번재 argument 에 dispatch 를 사용하기위해 함수를 만들어서 연결해주었습니다.

 

console 에 onwProps 를 찍어보면 state 에 입력된 값들을 확인할수있는데, 

위 코드와 다르게 ownProps를 이용하는 코드는 아래와같습니다.

처음에는 조금 햇갈렸는데 한가지만 기억하세요.

내가 A ,B ,C  각각 3개의 컴포넌트가있는데 state 가 필요하면 connect 함수에 첫번째 argument 에 

 

들어갈 아무 함수를 만들어서 연결해준후 사용할때는 해당 컴포넌트 prop로 받아서 사용.

state,dispatch 둘다 필요하다면 함수 2개 만들어서 connect 에 2개다 연결해주고 prop으로 받아서 사용

 

저처럼 store에서 따로 함수를 더만들어서 추가하는함수나 , 삭제하는 함수를 object 로 담아서 사용안하셔도

전혀 상관없습니다 .

 

정리해보면

store 에서 reducer 잘 만들어 주고 export 해주면 store 에서 할일은 끝

사용할 component 에서 connect import 해서 연결해주고 해당 component 에서 prop 로 받아서 사용하면 끝!

 

--잘못된 부분이 있으면 댓글 부탁드겠습니다 !

--