react-redux

connect 메소드

: 컴포넌트와 store를 연결시켜주는 역할

import { connect } from 'react-redux';

class Counter extends Component {
	render() {
    	return (
        	<div>this.props.value</div>
            <input 
            	onChange={(e) => this.props.changeDiff(e.target.value)}
            />
        )
    }
}

const mapStateToProps = (state) => {
	return {
          value: state.value
        }
}

const mapDispatchToProps = (dispatch) => {
    return {
        changeDiff: (diff) => dispatch(action(diff))
    }
}

Counter = connect(mapStateToProps, mapDispatchToProps)(Counter);

export default Counter;

위와 같은 방식으로 사용할 수 있다.

 

여기서 mapStateToProps 함수는 이름을 마음대로 바꿔도 되지만 보통 직관적으로 이렇게 쓴다.

이 함수의 역할은 컴포넌트의 state와 props를 이어준다.

즉, Counter 컴포넌트 안에서 this.props.state 라고 쓸 수 있게 해주는 것

 

이전에는 this.props.store.getState() 라고 썼어야 했는데 요걸 쉽게 만들어 준 것!~

 

두번째 인자로 받을 수 있는 mapDispatchToProps 함수는 원래 this.props.store.dispatch(action) 해서 쓰는 방식을 위와 같이 편하게 만들어준 것이다.