한 액션을 둘다 가져다쓰는상황
by 으렴import React, { Component } from 'react';
import { connect } from 'react-redux'
//import Bpp from './bpp'
//import Compo1 from './compo1'
class App extends Component {
render() {
//console.log(`>>app render`)
return (
<div>
{/* <h1>{this.props.num}</h1>
<button onClick={this.props.onMyClick}>bnt</button>
<h1>{this.props.age}</h1>
<button onClick={this.props.onAgeClick}>bnt</button>
<Bpp/> */}
<h1>---App.js---</h1>
<button onClick={this.props.onDEC}>button dec</button>
<h2>{this.props.num}</h2>
<Ctn/>
</div>
);
}
}
class Com1 extends Component {
render() {
return (
<div>
<h1>com1</h1>
<button onClick={this.props.onMyClick} >button</button>
</div>
);
}
}
export const mapActionToProps = (dispatch)=>{
//console.log(`>>>>>>action`);
return {
onMyClick : ()=>{
console.log(`asdf`);
dispatch({
type: 'MYCLICK',
})
},
onDEC : ()=>{
console.log(`dec`);
dispatch({
type:`DEC`,
})
},
}
}
export function reducer(state = {
num:0,
}
,action ){
switch (action.type) {
// TODO
//--------------------------------------------------------------//
case 'MYCLICK':
console.log(`myclick`);
state = {
num : state.num+1,
}
return state
case 'DEC':
console.log(`myclick`);
state = {
num : state.num+1,
}
return state
//--------------------------------------------------------------//
// case 'MYCLICK':
// state = {
// ...state,
// num : state.num +1,
// }
// return state
//--------------------------------------------------------------//
// case 'AGECLICK':
// state = {
// ...state,
// age : state.age +1,
// }
// return state
//--------------------------------------------------------------//
default: return state
}
}
const mapStateToProps = (state)=>{
//console.log(`>>>>>>>>>>>stateTo`);
return {
// num : state.num,
// age : state.age,
num : state.num,
}
}
// export default connect(
// mapStateToProps,
// mapActionToProps
// )(App);
const Ctn = connect(
mapStateToProps, //state안쓴다캐서
mapActionToProps
)(Com1);//이렇게 묶어버리면 컨테이너(ctn)가 된다//얘가 태그처럼 사용됨
//컴포넌트 한개가 액션을 분리했더ㅏ
export default connect (mapStateToProps,mapActionToProps)(App)
'Web > REACT.JS' 카테고리의 다른 글
react.js 시작하기 190814 - Route 활용하기 (0) | 2019.08.14 |
---|---|
react.js 시작하기 190813 - sass 사용해보기 (0) | 2019.08.13 |
react.js 시작하기 190808 - redux 사용하기 (0) | 2019.08.09 |
Javascript 비구조화 할당을 react에서 사용하기 (0) | 2019.08.08 |
react.js 시작하기 190808 - 전개 연산자 (0) | 2019.08.08 |
사이트의 정보
코딩하렴
으렴