Redux_여러가지 Container 작성법

Redux Store와 연동되는 컴포넌트를 컨테이너 컴포넌트(Container Component)라 부른다.

 

여기 모든 container은 똑같이 작동한다.

 

1) 기본

component=Com1.js

module=com1.js

 

import React from "react";
import Com1 from "../components/Com1";
import { connect } from "react-redux";
import { increase, decrease } from "../modules/com1";

const Com1Container = ({ number, increase, decrease }) => {
  return <Com1 number={number} onIncrease={increase} onDecrease={decrease} />;
};

const stateToProps = (state) => ({
  number: state.com1.number,
});

const dispatchToProps = (dispatch) => ({
  increase: () => {
    console.log("increase");
    dispatch(increase());
  },
  decrease: () => {
    console.log("decrease");
    dispatch(decrease());
  },
});

export default connect(stateToProps, dispatchToProps)(Com1Container);

 

2) connect 함수 내부에 익명 함수 형태로 선언

 

import React from "react";
import Com1 from "../components/Com1";
import { connect } from "react-redux";
import { increase, decrease } from "../modules/com1";

const Com1Container = ({ number, increase, decrease }) => {
  return <Com1 number={number} onIncrease={increase} onDecrease={decrease} />;
};

export default connect(
  (state) => ({
    number: state.com1.number,
  }),
  (dispatch) => ({
    increase: () => dispatch(increase()),
    decrease: () => dispatch(decrease()),
  })
)(Com1Container);

 

3) Redux의 bindActionCreators 유틸 함수 이용

import React from "react";
import Com1 from "../components/Com1";
import { connect } from "react-redux";
import { increase, decrease } from "../modules/com1";
import { bindActionCreators } from "redux";

const Com1Container = ({ number, increase, decrease }) => {
  return <Com1 number={number} onIncrease={increase} onDecrease={decrease} />;
};

export default connect(
  (state) => ({
    number: state.com1.number,
  }),
  (dispatch) =>
    bindActionCreators(
      {
        increase,
        decrease,
      },
      dispatch
    )
)(Com1Container);

 

4) connect 함수가 내부적으로 bindActionCreators 작업 하도록, 액션 생성 함수로 이루어진 객체 형태로 넣어두기

import React from "react";
import Com1 from "../components/Com1";
import { connect } from "react-redux";
import { increase, decrease } from "../modules/com1";

const Com1Container = ({ number, increase, decrease }) => {
  return <Com1 number={number} onIncrease={increase} onDecrease={decrease} />;
};

export default connect(
  (state) => ({
    number: state.com1.number,
  }),
  {
    increase,
    decrease,
  }
)(Com1Container);

 

5) Hooks 이용

import React, { useCallback } from "react";
import Com1 from "../components/Com1";
import { useSelector, useDispatch } from "react-redux";
import { increase, decrease } from "../modules/com1";

const Com1Container = () => {
  const number = useSelector((state) => state.com1.number);
  const dispatch = useDispatch();
  const onIncrease = useCallback(() => dispatch(increase()), [dispatch]);
  const onDecrease = useCallback(() => dispatch(decrease()), [dispatch]);

  return <Com1 number={number} onIncrease={onIncrease} onDecrease={onDecrease} />;
};

export default Com1Container;