Redux: Prop을 μ‚¬μš©ν•˜μ—¬ μƒνƒœλ₯Ό Prop에 맀핑 ν•˜μ‹œκ² μŠ΅λ‹ˆκΉŒ?

에 λ§Œλ“  2015λ…„ 09μ›” 06일  Β·  4μ½”λ©˜νŠΈ  Β·  좜처: reduxjs/redux

μ•ˆλ…•ν•˜μ„Έμš”,

λ‚˜λŠ” λ°˜μ‘ λ„€μ΄ν‹°λΈŒμ™€ ν•¨κ»˜ reduxλ₯Ό μ‚¬μš©ν•˜κ³  있으며 μ§€κΈˆκΉŒμ§€ ν›Œλ₯­ν•©λ‹ˆλ‹€!
λ‚΄ μ•±μ—λŠ” μ‚¬μš©μž ν”„λ‘œν•„μ΄ 있으며 μƒνƒœλŠ” λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€.

{
  users: {
    "1": {id: "1", name: "Ran"},
    "2": {id: "2", name: "Dan"}
  }
}

이제 단일 μ‚¬μš©μžλ₯Ό λ Œλ”λ§ν•˜λŠ” <Profile> ꡬ성 μš”μ†Œκ°€ μžˆμŠ΅λ‹ˆλ‹€.

class Profile extends React.Component {
  componentDidMount() {
    const { dispatch, userId } = this.props;
    dispatch(loadUser(userId));
  }
  render() {
    console.log(this.props.user.name);
  }
}

ꡬ성 μš”μ†Œκ°€ 마운트되면 userId λ₯Ό prop으둜 μ „λ‹¬ν•˜μ—¬ loadUser μž‘μ—…μ„ μ „λ‹¬ν•©λ‹ˆλ‹€.
그러면 API에 λŒ€ν•œ μš”μ²­μ΄ μƒμ„±λ˜κ³  μ‚¬μš©μž 응닡이 λ‚΄ users μƒνƒœμ— μΆ”κ°€λ©λ‹ˆλ‹€.

이제 λ‚΄ ν”„λ‘œν•„ ꡬ성 μš”μ†Œκ°€ μ‚¬μš©μžκ°€ μ†Œν’ˆμœΌλ‘œ λ Œλ”λ§ν•˜λ„λ‘ λ°›κΈ°λ₯Ό μ›ν•©λ‹ˆλ‹€.
κ·Έλž˜μ„œ 기본적으둜 λ‹€μŒκ³Ό κ°™μ΄ν•˜κ³  μ‹ΆμŠ΅λ‹ˆλ‹€.

function mapStateToProps(state) {
  return {
    user: state.users[props.userId]
  };
}
module.exports = connect(mapStateToProps)(Profile);

μ†Œν’ˆμ— λŒ€ν•œ μ•‘μ„ΈμŠ€ κΆŒν•œμ΄ μ—†κΈ° λ•Œλ¬Έμ— λΆ„λͺ…νžˆ μž‘λ™ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.
λ‚΄ 탐색 μŠ€νƒμ—μ„œ μ—¬λŸ¬ ν”„λ‘œν•„μ„ λ Œλ”λ§ν•˜κΈ° λ•Œλ¬Έμ— selectedProfile 와 같은 μƒνƒœλ₯Ό μ‚¬μš©ν•˜μ—¬ 필터링 ν•  수 μ—†μŠ΅λ‹ˆλ‹€. 각 ν”„λ‘œν•„μ€ μ„œλ‘œ λ‹€λ₯Έ userIdλ₯Ό 가지고 μžˆμŠ΅λ‹ˆλ‹€. global selectedProfile μƒνƒœλ₯Ό μ‚¬μš©ν•˜λ©΄ λ’€λ‘œ λ²„νŠΌμ΄ κΉ¨μ§‘λ‹ˆλ‹€.

λ‚΄κ°€ 찾은 μœ μΌν•œ ν•΄κ²° 방법은 ProfileContainer ꡬ성 μš”μ†Œλ₯Ό λ§Œλ“œλŠ” κ²ƒμž…λ‹ˆλ‹€.이 ꡬ성 μš”μ†ŒλŠ” ν•΄λ‹Ή prop으둜 μƒνƒœλ₯Ό ν•„ν„°λ§ν•˜κ³  단일 μ‚¬μš©μžλ₯Ό Profile ꡬ성 μš”μ†Œμ— μ „λ‹¬ν•©λ‹ˆλ‹€.

class ProfileContainer extends React.Component {
  render() {
    let user = this.props.users[this.prop.userId];
    return <Profile user={user} />
  }
}

말이 λ˜λ‚˜μš”? λ‹€λ₯Έ μ‚¬λžŒμ΄μ΄ λ¬Έμ œκ°€ λ°œμƒν•©λ‹ˆκΉŒ?

감사,
λž€.

question

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

μ•Ό,

이것은 더 λ§Žμ€ λ°˜μ‘ -redux λ¬Έμ œμž…λ‹ˆλ‹€ ... λ­”κ°€ λΉ μ‘Œμ„ μˆ˜λ„ μžˆμ§€λ§Œ, μ €μ—κ²ŒλŠ” 맀우 간단 ν•΄ λ³΄μž…λ‹ˆλ‹€. mapStateToProps에 μ „λ‹¬λ˜λŠ” "ownProps"인수λ₯Ό μ‚¬μš©ν•˜λ©΄ μœ„μ˜ μ½”λ“œκ°€ λ‹€μŒκ³Ό 같이 보일 κ²ƒμž…λ‹ˆλ‹€.

function mapStateToProps(state, ownProps) {
  return {
    user: state.users[ownProps.userId]
  };
}
module.exports = connect(mapStateToProps)(Profile);

ꡬ성 μš”μ†Œμ˜ μ†Œν’ˆμ— ν™•μ‹€νžˆ μ•‘μ„ΈμŠ€ ν•  수 μžˆμŠ΅λ‹ˆλ‹€. μ–΄λ–»κ²Œ λ³΄μž…λ‹ˆκΉŒ? μžμ„Έν•œ λ‚΄μš©μ€ https://github.com/rackt/react-redux#connectmapstatetoprops -mapdispatchtoprops-mergeprops-options λ˜λŠ” https://github.com/rackt/redux/blob/master/examples/real-world/containers/λ₯Ό μ°Έμ‘°ν•˜μ‹­μ‹œμ˜€. μ‹€μ œ 예제λ₯Όμœ„ν•œ

λͺ¨λ“  4 λŒ“κΈ€

μ•Ό,

이것은 더 λ§Žμ€ λ°˜μ‘ -redux λ¬Έμ œμž…λ‹ˆλ‹€ ... λ­”κ°€ λΉ μ‘Œμ„ μˆ˜λ„ μžˆμ§€λ§Œ, μ €μ—κ²ŒλŠ” 맀우 간단 ν•΄ λ³΄μž…λ‹ˆλ‹€. mapStateToProps에 μ „λ‹¬λ˜λŠ” "ownProps"인수λ₯Ό μ‚¬μš©ν•˜λ©΄ μœ„μ˜ μ½”λ“œκ°€ λ‹€μŒκ³Ό 같이 보일 κ²ƒμž…λ‹ˆλ‹€.

function mapStateToProps(state, ownProps) {
  return {
    user: state.users[ownProps.userId]
  };
}
module.exports = connect(mapStateToProps)(Profile);

ꡬ성 μš”μ†Œμ˜ μ†Œν’ˆμ— ν™•μ‹€νžˆ μ•‘μ„ΈμŠ€ ν•  수 μžˆμŠ΅λ‹ˆλ‹€. μ–΄λ–»κ²Œ λ³΄μž…λ‹ˆκΉŒ? μžμ„Έν•œ λ‚΄μš©μ€ https://github.com/rackt/react-redux#connectmapstatetoprops -mapdispatchtoprops-mergeprops-options λ˜λŠ” https://github.com/rackt/redux/blob/master/examples/real-world/containers/λ₯Ό μ°Έμ‘°ν•˜μ‹­μ‹œμ˜€. μ‹€μ œ 예제λ₯Όμœ„ν•œ

λ‚΄κ°€ 그것을 λ†“μ³€λ‹€λŠ” 것을 믿을 수 μ—†μŠ΅λ‹ˆλ‹€! κ°μ‚¬ν•©λ‹ˆλ‹€ @alanrubin

: μ’‹μ•„μš” :

ν–₯ν›„ react-redux 에 μ΄λŸ¬ν•œ 문제λ₯Ό μ œμΆœν•˜μ‹­μ‹œμ˜€.
이 μ €μž₯μ†Œμ™€ 관련이 μ—†μŠ΅λ‹ˆλ‹€.

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰