[react-redux] 3. redux 와 component 코드 분리

출처 : 생활코딩 react redux

 

 

0. 핵심

- redux 도입으로 인한 state 전달 용이

- 하지만 redux 코드와 기존 컴포넌트의 코드의 섞임으로 재사용성이 없어짐.

- react-redux 도입 이전 코드

 

 

**기존 코드(AddNumber.jsx, DisplayNumber.jsx)들을 되돌린다.

 

 

1. AddNumber.jsx

import React, {Component} from 'react';

export default class AddNumber extends Component{
  state = {size:1}

  render(){
    return(
      <div>
        <h1>Add Number</h1>
        <input type="button" value="+" onClick={function(){
          this.props.onClick(this.state.size)
        }.bind(this)}></input>
        <input type="text" value={this.state.size} onChange={function(e){
          this.setState({size: Number(e.target.value)});
        }.bind(this)}></input>
      </div>
    )
  }
}

 

 

2. DisplayNumber.jsx 

import React, {Component} from 'react';

export default class DisplayNumber extends Component{
  render(){
    return (
      <div>
        <h1>Display Number</h1>
        <input type="text" value={this.props.number} readOnly></input>        
      </div>
    )
  }
}

 

 

**새로운 파일을 만들어 component들을 감싸고 redux 코드 기능을 해준다

**새로운 파일을 src > containers 폴더 안에 만들어준다.

 

 

3. AddNumber.jsx 

import AddNumber from "../components/AddNumber";
import React, {Component} from "react";
import store from '../store';

export default class extends Component{
    render(){
        return <AddNumber onClick={function(size){
            store.dispatch({type:'INCREMENT', size:size});
        }.bind(this)} ></AddNumber>
    }
}

 

 

4. DisplayNumber.jsx

import DisplayNumber from '../components/DisplayNumber';
import React, { Component } from 'react';
import store from "../store";

export default class extends Component{
    
    state = {number:store.getState().number}
    constructor(props){
        super(props);
        store.subscribe(function(){
            this.setState({number:store.getState().number});
        }.bind(this))
    }
    render(){
        return (
            <DisplayNumber number={this.state.number}></DisplayNumber>
        )
    }
}