React-Redux(1)

관리하고 싶은 컴포넌트 컨테이너로 모으기

컨테이너 관리하는 방법

import 컴포넌트 from '../components/DisplayNumber';
import { connect } from 'react-redux';

function mapReduxStateToReactProps(state){
	return{
    	stateName: state.nextState
    }
}

function mapReduxDispatchToReactProps(dispatch){
	return{
    	onClick: function (size) {
    	dispatch({ type: 'INCREMENT', size: size });
    	},
    }
}
export default connect(mapReduxStateToReactProps(state),mapReduxDispatchToReactProps)(컴포넌트);

connect()();

첫번째 괄호에는 인자를 2개를 받음
(리덕스 state를 리액트 props로 연결해주는 함수(state),
리덕스 dispatch를 리액트 props로 연결해주는 함수(store.dispatch)

1.리덕스 state 리액트 props 연결 함수 

	store 의 state 가 변경 될때마다 실행됨
    이 함수는 state를 인자로 받도록 약속되어있음
    return 프로퍼티 key값은 사용할 state 이름과 (값 말고) 일치하게 사용해야함
    

2.리덕스 dispatch 리액트 props 연결 함수

	이 함수는 store.dispatch를 인자로 받도록 약속되어있음
    인자 이름은 아무렇게나 변경해서 사용가능 (예제에서는 dispatch로 사용)
	return 프로퍼티 key값은 사용할 props 이름과 (값 말고) 일치하게 사용해야함
    프로퍼티 value값은 dispatch 정보 등으로 구성

두번째 괄호에는 import 한 컴포넌트