React의 Class Component로 React-Redux에 연결

React-Redux의 설명 된 페이지 등에서는 대체로 Functional Component에서만 설명되어 있습니다.
Class Component에서 어떻게 연결하는지에 대한 구체적인 예가 거의 보이지 않았다.
익숙한 사람으로부터 보면 타 사랑도 없는 문제일지도 모르지만 개인적으로는 조금 고전했기 때문에 집필

Class Component가 아니면 컴퍼넌트 마운트·언마운트시 등의 타이밍으로 불리는 라이프 사이클 메소드를 정의하는 경우에 불편하거나(인식 오류일지도 모르지만), 원의 컴퍼넌트를 Class Component로서 정의해 그것을 React-Redux 연결하고 싶은 경우이거나 등
→【추기】ver16.8에서 추가된 React Hooks를 사용하면 Functional Component에서도 동등한 일을 할 수 있을 것 같다

준비

이번 Functional Component에서 Class Component로 재작성한다는 접근법을 실시해 재기록원으로서
connected-react-router 의 examples/basic 이용하기
이것을 다운로드하고 정상적으로 시작하는 경우
명령 프롬프트, 터미널 등에서 examples/basic으로 이동
npm install로 종속성 해결
npm start로 서버 시작
브라우저에서 http://localhost:8080에 액세스하면 다음과 같은 화면이 표시됩니다.

이 중 카운터 부분에서 Redux를 사용하고 있습니다.

여기서 [+] 버튼을 누르면 카운트 업됩니다.

이 카운트 업 된 값은 스토어에 저장되므로 React Router를 통해 다른 화면으로 이동합니다.

돌아와도 값이 유지됩니다.

이 동작을 Redux에서의 저장 동작의 지침으로 삼았습니다.

실제 재작성

이번 재기록은 이 Counter의 Component가 정의되고 있는 examples/basic/src/components/Counter.js 파일에 대해서 실시한다

흩어져 시행 착오한 결과 재기록이 필요한 개소는 이것뿐이었다

examples/basic/src/components/Counter.js

import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { increment, decrement } from '../actions/counter'

-const Counter = (props) => (
-  <div>
-    Counter: {props.count}
-    <button onClick={props.increment}>+</button>
-    <button onClick={props.decrement}>-</button>
-  </div>
-)
+class Counter extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render(){
+    return (
+      <div>
+        Counter: {this.props.count}
+        <button onClick={this.props.increment}>+</button>
+        <button onClick={this.props.decrement}>-</button>
+      </div>
+    );
+  }
+}

Counter.propTypes = {
  count: PropTypes.number,
  increment: PropTypes.func.isRequired,
  decrement: PropTypes.func.isRequired,
}

const mapStateToProps = state => ({
  count: state.count,
})

const mapDispatchToProps = dispatch => ({
  increment: () => dispatch(increment()),
  decrement: () => dispatch(decrement()),
})

export default connect(mapStateToProps, mapDispatchToProps)(Counter)

주요 변경 사항으로는
본체 JSX는 render()의 반환값으로 지정
화살표 함수의 인수는 props가 constructor()에서 super()로 전달됩니다.
super에 건네진 props는 class내에서는 this.props가 된다