컴포넌트와 리덕스를 연결시켜주는 connect 함수

컨테이너 컴포넌트 : 리덕스 스토어와 연동된 컴포넌트

컴포넌트를 리덕스와 연동하려면 react-redux에서 제공하는 connect 함수를 사용해야 한다.

connect(mapStateToProps, mapDispatchToProps)(연동할 컴포넌트)
mapStateToProps : 리덕스 안의 상태를 컴포넌트의 props로 넘겨주는 함수
mapDispatcherToProps : 액션 생성 함수를 컴포넌트의 props로 넘겨주는 함수

count 컨테이너

import React from 'react';
import { connect } from 'react-redux';
import { increase, decrease } from '../modules/counter';
import Counter from '../components/Counter';

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

const mapStateToProps = state => ({
    number: state.counter.number,   // state에서 가져온 number
})

const mapDispatchToProps = dispatch => ({
    increase : () => {
        dispatch(increase())    // modules에서 가져온 increase
    },
    decrease : () => {
        dispatch(decrease())    // modules에서 가져온 decrease
    }
})

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

• mapDispatchToProps 안의 dispatch()는 modules에서 가져온 액션 생성 함수다.

• bindActionCreators를 통해 간단하게 구현 가능하다. ( connect 함수가 내부적으로 구현 해줌)

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