React -redux:: store와 component 연결하기

React-redux를 사용해 todolist를 만들기 위한 세팅.

 

 

react에서 redux를 사용할땐

react-redux를 추가해줘야 한다.

페이지여러개를 만들거기 때문에 react-router-dom도 추가.

(react-router-dom은 다른 페이지에서 설명)

 

 

routes라는 폴더를 만들어주고, 화면이 달라질 때 표시할 컴포넌트별로 나눠줌.

Redux를 사용할 것이기 때문에 store도 따로 분리.

 

 

  index  

Provider을 사용해 store을 props로 사용.

 

 

 

  store  

 

todo list를 만들어줄 state와 함수들.

 

 

dispatch에 사용할 함수들을

export 해줌.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

export store.

 

 

 

  Home.js  

 

store에 연결해주어야함.

connect 필요.

 

Home(props)

 

React Hook으로 state 정의.

component 자체 state.

(store에 연결x)

 

 

 

 

 

 

 

 

 

 

 

store에 연결된 함수, 

mapStateToProps를 만듬.

store에서 받아온 state와

Home의 props를 받음.

이 함수에서 리턴하는 건 뭐든 Home의 props로 반환됨.

connect (mapStateToProps) (Home) : store와 Home 연결.

 

 

콘솔창을 확인해보면,

console.log(state, ownProps) : store에 있는 state 값을 볼 수 있다.

console.log(props) : getCurrentState 함수의 리턴값({toDos: state})이 추가된 것을 확인 할 수 있다.