react-redux

설치 방법

• 해당 프로젝트의 터미널에 npm add react-redux react-router-dom을 입력한다.

사용 방법

1. index.js에 가서 import { Provider } from “react-redux”;를 통해서 import한다.
2. store.js를 만들고 createStore를 통한 변수를 만든다. (예시 : store)
3. index.js에 가서 store.js를 import한다.
4. index.js의 ReactDOM.render에서 <App/>을 <Provider store={store}></Provider>로 감싸준다.
   • Provider는 값이 변경될 때마다 랜더링을 시킨다.
5. store를 사용할 js 페이지에 가서 import { connect } from “react-redux”;를 통해서 import한다.
6. 순수 객체를 반환하는 함수를 만든다.

    function mapStateToProps(state) {
        return { toDos: state };
    }
  

7. 해당 파일명이 Home이라고 가정했을 때, 최하단에 export default connect(mapStateToProps)(Home);을 작성한다.
   • 기본 형식 : export default (mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)(컴포넌트명);
   • mapStateToProps : 값이 변경될때 실행될 함수 (불필요시 null)
   • mapDispatchToProps : dispatch가 진행됬을때 실행될 함수

connect() 사용시 함수 실행 순서

1. mapStateToProps
   • 첫번째 인자 : state
   • 두번째 인자 : 전달하기 원하는 값
2. mapDispatchToProps
   • 첫번째 인자 : dispatch 함수
   • (index.js => Provider 태그 => store 속성에 명시된 컴포넌트를 실행)
3. component’s base function

• mergeProps와 options는 써본 적이 없기 때문에 생략

오류 참고

• 만약 인자를 {toDo}로 받았는데 {toDo.id}가 에러가 발생한다면 {toDo?.id}라고 쓰면 된다.

참고

• https://react-redux.js.org/api/connect