【React】Presentational Component と Container Component

Component

• ReactはUIを Component という部品単位で扱う
• Presentational Component と Container Component に分けることで、見た目とロジックを切り分けることができる

Presentational Component

• 表示のみに専念する
• 自分のコンポーネント以外のことについて依存しない
• 親からpropsとしてデータやコールバックを受け取る

components/App.js

import React from 'react';

const App = ({ text: string, onButtonClick: () => void }) => (
  <div>
    <p>{text}</p>
    <button onClick={onButtonClick}>Click</button>
  </div>
);

export default App;

Container Component

• ロジックのみに専念する
• Presentational Componentに具体的なデータやコールバックを渡す

containers/App.js

import App from "../components/App";
import { connect } from "react-redux";

const mapStateToProps = state => {
  return {
    text: state.text
  };
};

const mapDispatchToProps = dispatch => {
  return {
    onButtonClick: () => {
      dispatch({ type: "CLICK" });
    }
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(App);

Component の分離によるメリット

• アプリケーション部分とUI部分を分離できる
• 表示するデータやボタン押下時の処理を外部から指定することができる
  -> 再利用性が上がる