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

App.js 스토어를 연결해줍니다. 

redux와 react-redux에서 createStore, Provider등을 가져와서 스토어를 만들어주고 reducer를 넣어주어서  연결시켜줍니다. 그리고 Provider에 store에 넣어줍니다. 그리고 여기서 Timer를 호출하면 Timer폴더에 index.js가 실행됩니다. 

Timer 컴포넌트는 이러한 파일 구조를 가지고 있습니다. 

우선 index.js파일에서 connect를 불러옵니다. 

connect에 presenter에 있는 Timer클래스를 불러오고 state를 반환해주는 함수를 등록해줍니다. 

여기서 log를 찍어보면 reducer에서 등록해놓은 state를 확인 할 수 있습니다. 그리고 연결해준 Timer에 가서는 일반적으로 state를 받듯이 props에서 받아가면 됩니다. 

presenter.js에서 받은 state 받기

이것을 로그로 찍어보면 위와 똑같이 결과가 나온다. 이글을 쓰면서도 아직 구조가 많이 헷갈린다. 

그래도 생각해보자면 

reducer를 만들어 준 뒤 부모 컴포넌트(APP.js)에서 Provider를 통해서 reducer store를 등록해주고 그래서 하위에 등록된 Timer는 index.js에서 state를 함수에 등록해주면 받을 수 있는 것 같습니다. 

그리고 일반적으로 index.js에서 export default Timer를 통해 파일 까지 접근안해주고 폴더까지만 접근해도 이 클래스를 가져올 수 있었습니다. 하지만 이번에도 어색하게 index.js에서 connect를 사용하면서 export default Timer를 안해주어도  presenter.js의 Timer class와 연결시켜줘서 호출되는 것 같습니다. 신기하지만 아직도 어색한 구조입니다. 더 연습해야겠습니다. 

다음글에는 reducer의 state가 아닌 action에 접근해보겠습니다.