React-Redux 사용방법

react에서 redux를 사용하려면 우선 터미널에  npm install react-redux를 설치해주자

 

우선 폴더 구조는 아래와 같다.

 

store 를 다른 컴포넌트에서 사용하려면 약간의 설정이 필요하다 (어렵지 않음)

 

1) react-redux에서 { Provider  }를 import 해온다    

2) index.js 에 Provider로 App을 감싸준다  

<Provider store={ store } > 

    <App/>

  <Provider />, 

 

 

store에서는 js와 redux를 사용했듯이 작성하면 되며 차이가 있다면 , export를 해주어야 한다.

 

3) store를 외부에서 사용 가능하게 export default store;  해준다.

그리고 (사용할 컴포넌트) Home.js 에서는 store에 있는  데이터를 사용하기 위해서

4) react-redux에 connect() 함수를 import 하여야 한다  import { connect } from "react-redux";

 

connect () 함수는  store를 다른 컴포넌트에서 사용할 수 있게 연결해주는데 ,

 

connect() 함수는  2개의  argumnet를 갖는데

첫 번째는 state이고

두 번째는 dispatch이다

 

아래 공식문서를 참고!

https://react-redux.js.org/using-react-redux/connect-mapstate

Connect: Extracting Data with mapStateToProps | React Redux

https://react-redux.js.org/using-react-redux/connect-mapdispatch

Connect: Dispatching Actions with mapDispatchToProps | React Redux

 

Home컴포넌트 가 끝나는 지점은

 

mapStateToProps와 mapDispatchToProps를 만들어주고 각각 return을 꼭 해준다

//return 없으면 에러 나경고 발생.

export default connect(mapStateToProps, mapDispatchToprops) (Home); 

 

마지막으로 Home에 prop을 받아주면 

store에 데이터를 사용할 수 있고 dispatch 하여 요청할 수도 있다.

 

( 정리해보면 )

store에 데이터를 만든다.

store를 사용할 컴포넌트에서 함수를 만들고 만든 함수는 

connect 함수에 argument에 넣어주면 연결이 된다.

공식문서처럼 mapStateToProps와 mapDispatchProps 함수 이름을 같게 했지만

꼭 그럴 필요는 없다 작명한 함수를 connect에 연결만 해주면 된다.

 

기억해야 할 건 connect 함수에 첫 번째 인자로 들어가는 함수와 두 번째 인자로 들어가는 함수에

각각 state와 dispatch를 꼭 return 해주고 home에서 받아쓴다고 기억하자.

 

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