[react-redux] 4. ract-redux 도입

출처 : 생활코딩 react redux

 

 

시작전 npm install react-redux 설치

 

 

1. index.js

- component와 store 연결을 한번에 해결

  > Provier와 store 이용 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {Provider} from 'react-redux';
import store from './store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

 

2. AddNumber.jsx ( src > containers 폴더 )

- connect(...)(AddNumber)는 AddNumber 컴포넌트를 감싸는 역할을 한다.

- connect(..., mapDispatchToProps)(...) 첫번째의 두번째 인자로, store로 값을 보내는 함수를 넣어준다.

  값이 바뀔 때마다 자동으로 업데이트 한다. 

import AddNumber from "../components/AddNumber";
import {connect} from 'react-redux';

function mapDispatchToProps(dispatch){
    return {
    // onClick={function(size){
    // }.bind(this)
    // store.dispatch({type:'INCREMENT', size:size});
        onClick : (size) => dispatch({type:'INCREMENT', size:size})
        }
    }
}
export default connect(null, mapDispatchToProps)(AddNumber);

 

 

3. DisplayNumber.jsx ( src > containers 폴더 )

- connect(...)(DisplayNumber)는 AddNumber 컴포넌트를 감싸는 역할을 한다.

- connect( mapReduxStateToReactProps, ...)(...) 첫번째의 첫번째 인자로, store 에서 값을 받는 함수를 넣어준다.

 

  값이 바뀔 때마다 자동으로 받고 렌더링 한다. 

import DisplayNumber from '../components/DisplayNumber';
import {connect} from 'react-redux';
function mapReduxStateToReactProps(state){
    return{ // 객체는 redux에서 전달하고 싶은 것의 이름
            // state = {number:store.getState().number}
            // store.subscribe(function(){
            // this.setState({number:store.getState().number});
            // }.bind(this)) 
            // 의 역할을 한다. redux 값이 바뀔때마다 자동 실행
            // 아래 state는 redux의 것
        number: state.number
    }
}

//function mapReduxDispatchToReactProps(){}

export default connect(mapReduxStateToReactProps/*, mapReduxDispatchToReactProps 없어도 됨 여기서 패스*/)(DisplayNumber);