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 한 컴포넌트
Author And Source
이 문제에 관하여(React-Redux(1)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@power/React-Redux저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)