코딩하렴

한 액션을 둘다 가져다쓰는상황

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)

사이트의 정보

코딩하렴

으렴

활동하기