React-redux

고라니·2021년 2월 17일

mapStateToProps()의 약속된 규칙

import DisplayNumber from '../components/DisplayNumber';
import {connect} from 'react-redux';
function mapReduxStateToReactProps(state){
    return {
        number:state.number
    }    
    // number는  return <DisplayNumber number={this.state.number}></DisplayNumber> 의 this.state.number고
     //state.number는 리덕스 store의 state.number고 , subscribe절까지 이 함수가 커버함 
    
}

function mapReduxDispatchToReactProps(){

}
export default connect(mapReduxStateToReactProps, mapReduxDispatchToReactProps)(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>
    }
} */
  1. return값으로 객체를 반환해야 하며, 이 객체의 property는 wrapped 되어있는(데이터를 전달하고자 하는) component의 props의 이름과 같아야 한다.
  2. Redux-Store의 값이 변경 될 때마다 호출된다.
  3. 호출될 때 Redux-Store의 state가 파라미터로 주입된다.
profile
공부를 열심히 하는 학부생

0개의 댓글