[react-redux] 2. redux 도입 어플리케이션

출처 : 생활코딩 react redux

 

 

0. 핵심

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

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

 

 

들어가기전 : npm install redux 를 통해 redux 설치가 필요하다.

 

 

1. AddNumber.jsx

- dispatch를 통해 저장소의 reducer로 type과 state 변수를 보낸다.

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

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

  render(){
    return(
      <div>
        <h1>Add Number</h1>
        <input type="button" value="+" onClick={function(){
          store.dispatch({type:'INCREMENT', size: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. store.js (src 폴더에 생성)

- 컴포넌트 state들의 저장소이다.

- function(state, action) 는 reducer라고 불린다 

** reducer는 state 값은 변경사항은 그대로 유지하며 따로 넣어주는게 아닌, 자동으로 주입된다.

** action은 우리가 넣어주는 변수이다

** 보통 이전 state와 현재 action 변수를 조합해 state를 원하는 다음 값으로 만들어 반환한다.

- redux의 createStore 함수는 reducer를 넣어주면 저장소를 반환한다.

- reducer에서 AddNumber 컴포넌트에서 보낸 type과 state 변수를 action으로 받고 state를 반환한다.

import {createStore} from 'redux';

export default createStore(function(state, action){
    // size와 type 등의 객체가 action으로 넘어온다.
    // state는 반환값
    if(state === undefined){
        return {number:0}
    }
    if(action.type === 'INCREMENT'){
        return {...state, number:state.number + action.size }
    }
    return state;
}, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)

 

 

3. DisplayNumber.jsx

- store.getState()로 값을 가져온다.

- store.subscribe를 통해 redux의 state가 바뀌면 자동으로 불러온다. 그후

  setState 함수로 다시 rendering 한다.

import React, {Component} from 'react';
import store from "../store";
export default class DisplayNumber extends Component{
  state = {number:store.getState().number}
  constructor(props){
    super(props);
    store.subscribe(function(){
      this.setState({number:store.getState().number});
    }.bind(this))
  }
  render(){
    return (
      <div>
        <h1>Display Number</h1>
        <input type="text" value={this.state.number} readOnly></input>        
      </div>
    )
  }
}