การอัพเดท redux ด้วยการ click

import { connect } from 'react-redux'

class Home extends React.Component {
    updateRedux = () => {
        this.props.setReduxClick('new_data')
    }

    render () {
        return <button className="btn btn-primary" onClick={this.updateRedux}>Set</button>
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        setReduxClick: (data) => {
            dispatch({type: 'UPDATE_DATA', payload: data})
        }
    }
}

export default connect(state => state, mapDispatchToProps)(Home)

อันนี้ข้ามเรื่อง การ createStore ทำ reducer ครอบ Provider ไปก่อนนะครับ

const mapDispatchToProps = (dispatch) => {
    return {
        setReduxClick: (data) => {
            dispatch({type: 'UPDATE_DATA', payload: data})
        }
    }
}

อันนี้ไว้สำหรับ dispatch redux อยากจะใช้ อะไรบ้าง ก็สร้างๆ เข้าไปในนี้

พอตอนเรียกใช้ พวก function ที่เราสร้างไว้ มันก็จะถูกเรียกผ่าน props ได้เลยแบบนี้

this.props.setReduxClick('new_data')

จบครับ โครตง่าย