Razzle: ์ƒ์„ฑ์ž - ์ˆ˜ํผ ๋ฐ ๋ฐ”์ธ๋“œ ํ˜ธ์ถœ

์— ๋งŒ๋“  2016๋…„ 06์›” 09์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: jaredpalmer/razzle

์•ˆ๋…•ํ•˜์„ธ์š” @jaredpalmer ๋‹˜ , ์Šคํƒ€ํ„ฐ ํ”„๋กœ์ ํŠธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ”„๋กœ์ ํŠธ ์ž‘์—…์„ ์‹œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค. ํ›Œ๋ฅญํ•œ ์ผ!

์‚ฌ์šฉ์ž ์ƒํ˜ธ์ž‘์šฉ(์˜ˆ: ๋ฒ„ํŠผ ํด๋ฆญ)์—์„œ redux ์ž‘์—…์„ ๋””์ŠคํŒจ์น˜ํ•˜๋Š” ๊ฒƒ์— ๋Œ€ํ•ด ์งˆ๋ฌธ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋‚ด ์งˆ๋ฌธ์€ ์˜ฌ๋ฐ”๋ฅธ ๊ตฌ๋ฌธ์— ๋Œ€ํ•œ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ณผ๊ฑฐ์—๋Š” ์ƒ์„ฑ์ž๋ฅผ ํ˜ธ์ถœํ•˜๊ณ  ๋‹ค์Œ๊ณผ ๊ฐ™์ด bind ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ–ˆ์Šต๋‹ˆ๋‹ค.

function mapDispatchToProps(dispatch) {
    return bindActionCreators({
        importedAction,
    }, dispatch);
}
class Calendar extends React.Component {

constructor(props) {
   super(props);
   this.handleClick = this.handleClick.bind(this);
}

handleClick(programId) {
        this.props.importedAction()
        .then((response) => {
            do something with response
        });
    }
 }
....

render() {
 return (
   <a onClick={this.handleClick}>Click me to dispatch action</a>
)
}

๋‚˜๋Š” ๋‹น์‹ ์ด ํ•ญ์ƒ "Extends React.Component"๋ฅผ ์ž‘์„ฑํ•˜์ง€ ์•Š๋„๋ก ํ•˜๋Š” babel-plugin์ด ์„ค์น˜๋˜์–ด ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. 'bindActionCreators'๋„ ๋ณผ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

์งˆ๋ฌธ, ๊ท€ํ•˜์˜ ์Šคํƒ€ํ„ฐ ํ”„๋กœ์ ํŠธ์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ์‹์œผ๋กœ ์œ„์˜ ๊ธ€์„ ์ž‘์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

connect from react-redux ์„(๋ฅผ) ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

'react-redux'์—์„œ { ์—ฐ๊ฒฐ } ๊ฐ€์ ธ์˜ค๊ธฐ

... ๋‹น์‹ ์˜ ๊ตฌ์„ฑ ์š”์†Œ ...

๊ธฐ๋ณธ ์—ฐ๊ฒฐ ๋‚ด๋ณด๋‚ด๊ธฐ(mapStateToProps, actionCreators)(์บ˜๋ฆฐ๋”)

๋ชจ๋“  3 ๋Œ“๊ธ€

function mapDispatchToProps(dispatch) {
    return bindActionCreators({
        importedAction,
    }, dispatch);
}
class Calendar extends React.Component {

handleClick(programId) {
        this.props.importedAction()
        .then((response) => {
            do something with response
        });
    }
 }
....

render() {
 return (
   <a onClick={(evt) => this.handleClick()}>Click me to dispatch action</a>
)
}

connect from react-redux ์„(๋ฅผ) ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

'react-redux'์—์„œ { ์—ฐ๊ฒฐ } ๊ฐ€์ ธ์˜ค๊ธฐ

... ๋‹น์‹ ์˜ ๊ตฌ์„ฑ ์š”์†Œ ...

๊ธฐ๋ณธ ์—ฐ๊ฒฐ ๋‚ด๋ณด๋‚ด๊ธฐ(mapStateToProps, actionCreators)(์บ˜๋ฆฐ๋”)

์ƒ์šฉ๊ตฌ์™€ ๊ด€๋ จ์ด ์—†๊ธฐ ๋•Œ๋ฌธ์— ๋‹ซ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ Redux์—์„œ Dan Abramov์˜ ๊ณผ์ •์„ ์‹œ์ฒญํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

๋˜ํ•œ connect react-redux API๋ฅผ ํ™•์ธํ•˜์‹ญ์‹œ์˜ค. https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops -mapdispatchtoprops-mergeprops-options

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰