Redux(ducks) 컴포넌트와 redux action연결하기

redux action연결하기

이전에는 state를 redux를 이용하여 컴포넌트와 연결했습니다. 그럼 이번에는 reducer에 정의한 action을 등록해보겠습니다.  

아까전과 같이 index.js 파일에 만들어 보겠습니다. 

1. bindActionCreators를 받아와서 reducer에 만들어 놨던 action이름과 매칭해서 연결해줍니다. 

2. 등록된 함수가 자동으로 type을 반환해주면서 자동으로 reducer를 실행하게 됩니다. 한마디로 action을 전달해줄 때 마다 자동으로 reducer가 실행됩니다.

 type에 맞추어서 등록된 함수가 실행됩니다. 

3. Timer 클래스에서 확인

이전과같이 props에서 받아오면 됩니다. props에서 등록된 action들을 받아오며 함수실행 시키듯이 실행하면 됩니다. 

위에 있던 startTimer와 restartTimer를 불러온 것을 알 수 있다. 

 

구조가 이상해 보일 수 있지만 reducer에 만들어 놓은 action이름과 동일하게 bindActionCreator를 통해서 연결한뒤 컴포넌트에 사용할 때 마다 자동으로 reducer를 실행해주어 state의 값을 바꾸는 action을 프로젝트에서 global하게 실행할 수 있는 것입니다.