ว่ากันด้วย function connect และ lord parameter ที่ 3 React Redux

โดยปกติแล้วใครที่ใช้ redux ร่วมกับ react อยู่จะรู้กันว่า function connect จะต้องส่ง parameter ไป 2 ตัว คือ

  1. mapStateTopProps
  2. mapDispatchToProps

แต่จริงๆแล้วเราสามารถส่ง parameter ตัวที่ 3 เข้าไปนั่นก็คือ mergeProps เดี๋ยวจะมาดูกันว่ามันใช้ทำอะไรได้บ้าง

ยกตัวอย่างเรามีกองทหารอยู่ในปราสาทจาก state castle.swordmans แล้วต้องการจัด formation ในการออกรบด้วย function setformation()

ในไฟล์ containers ไฟล์หนึ่ง เราจะเขียนประมาณนี้

const mapStateToProps = (state) => ({
swordmans: state.castle.swordmans,
})
const mapDispatchToProps = (dispatch) => {
setFormation(swordmans) {
dispatch(setFormation(swordmans) );
}
}
export default connect(mapStateToProps, mapDispatchToProps)(BattleField);

และการเรียกใช้ใน React Component ก็จะประมาณนี้

class BattleField extends Component { 
componentDidMount(){
const { swordmans, setFormation } = this.props;
setFormation(swordmans);
}
}

จะเห็นได้ว่าเราต้องส่งทหารเราไปยัง battlefield เพื่อทำการจัดทัพใน battlefield เลยทั้งๆที่ swordmans ก็อยู่ใน state ที่เราเก็บเอาไว้แท้ๆ ในเมื่อเรารู้อยู่แล้วว่าต้องการส่ง swordmans กลุ่มนี้ไปเราจะส่งไปให้รู้วิธี setFormation เลยไม่ได้หรอไม่ต้องไปส่งค่าที่ BattleField

ใน function connect ก็เลยส่ง lord parameter ที่ 3 ที่ชื่อว่า mergeProps เข้ามาจัดการปัญหานี้ให้โดย code ที่ได้จะกลายเป็นแบบนี้

Container File

const mapStateToProps = (state) => ({
swordmans: state.castle.swordmans,
})
const mapDispatchToProps = (dispatch) => {
setFormation(swordmans) {
dispatch(setFormation(swordmans) );
}
}
const mergeProps = (stateProps, dispatchProps, ownProps) => {
return Object.assign({}, ownProps, {
setFormation() {
dispatchProps.setFormation(stateProps.swordmans);
}
});
}
export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(BattleField);

จะเห้นได้ว่า มี function ที่เพิ่มเข้ามาคือ mergeProps มันจะทำการรวม Props ที่เราจะส่งไปยัง component ให้ใหม่หลังจาก mapState กับ mapDispatch แล้วที่นี้ใน component เราก็แค่

class BattleField extends Component { 
componentDidMount(){
const { setFormation } = this.props;
setFormation();
}
}

จะเหลือแค่ function setFormationเท่านั้นที่ถูกส่งไปยัง component แล้วเราก็ไม่ต้องส่ง parameter เข้าไปในฟังก์ชั้นแล้ว เพราะถูกจัดการตั้งแต่ฟังก์ชั้น mergepropsแล้วนั่นเอง

Credit

https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options