加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

react-react 入门 helloworld 计数器

发布时间:2020-12-15 06:47:43 所属栏目:百科 来源:网络整理
导读:最简单的一个react-redux 示例,实现点击加一的计数器 import React from 'react' import ReactDOM from 'react-dom' import {createStore} from 'redux' import {Provider,connect} from 'react-redux' function reducers(state = 1 ,action) { switch (act

最简单的一个react-redux 示例,实现点击加一的计数器

import React from 'react'
import ReactDOM from 'react-dom'
import {createStore} from 'redux'
import {Provider,connect} from 'react-redux'

function reducers(state = 1,action) {
    switch (action.type) {
        case 'ADD':
            return state + action.payload;
        default:
            return state;
    }
};

const store = createStore(reducers)

const ResultIn = (props) => <div>结果:{props.value}</div>

const Result = connect(
    mapStateToPropsResult
)(ResultIn)

var AppIn = (props) => <div onClick={() => {
    props.onChange()
}}>点我加1<Result/></div>

function mapStateToPropsResult(state) {
    return {
        value: state
    }
}

function mapStateToProps(state) {
    return {
        value: state
    }
}

function mapDispatchToProps(dispatch) {
    return {
        onChange: () => dispatch({type: 'ADD',payload: 1})
    }
}

const App = connect(
    mapStateToProps,mapDispatchToProps
)(AppIn)

ReactDOM.render(
    <Provider store={store}>
        <App/>
    </Provider>,document.getElementById('root')
)

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读