redux-react

最新推荐文章于 2024-05-21 19:50:21 发布

nknmn_

最新推荐文章于 2024-05-21 19:50:21 发布

阅读量188

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/qq_50829019/article/details/126373985

版权

// Home 
import React, { PureComponent } from 'react'

export default class Home extends PureComponent {
    constructor(props){
        super(props);

        this.state = {
            counter: store.getState().counter
        }
    }

    componentDidMount(){
        // 订阅
        this.unsubscribue = store.subscribe(() => {
            this.setState({
                counter: store.getState().counter
            })
        })
    }

    componentWillUnmount() {
        // 取消订阅
        this.unsubscribue();
    }

    render() {
        return (
            <div>
                <h1>Home</h1>
                <h2>当前计数: { this.state.counter }</h2>
                <button onClick={ e => this.increment() }> +1 </button>
                <button onClick={ e => this.addNumber(5) }> +5 </button>
            </div>
        )
    }

    increment() {
        store.dispatch(addAction(1));
    }

    addNumber(num){
        store.dispatch(addAction(num))
    }
}