์๋ ํ์ธ์ @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'๋ ๋ณผ ์ ์์ต๋๋ค.
์ง๋ฌธ, ๊ทํ์ ์คํํฐ ํ๋ก์ ํธ์์ ์ฌ์ฉํ ์ ์๋ ๋ฐฉ์์ผ๋ก ์์ ๊ธ์ ์์ฑํ๋ ๋ฐฉ๋ฒ์ ๋ฌด์์ ๋๊น?
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
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
connect
fromreact-redux
์(๋ฅผ) ์ฌ์ฉํ์ง ์๋ ๊ฒ ๊ฐ์ต๋๋ค.'react-redux'์์ { ์ฐ๊ฒฐ } ๊ฐ์ ธ์ค๊ธฐ
... ๋น์ ์ ๊ตฌ์ฑ ์์ ...
๊ธฐ๋ณธ ์ฐ๊ฒฐ ๋ด๋ณด๋ด๊ธฐ(mapStateToProps, actionCreators)(์บ๋ฆฐ๋)